I'm looking to extend dev tools in chrome to support 'what-just-ran'. Something like this - you click a record button, do something on the web page, and stop recording. In dev tools, it should show what part of the code ran - like dynamic code coverage. From what I read on the docs, there isn't any direct way. I have been hacking around with dev-front-end (source for developer tools) by setting breakpoints on every line and finding what line executed, that's about how far I could go. Is this project possible with current chrome extension APIs or even dev front end changes?
JS heatmap profiler slash code coverage tool does that by preprocessing JavaScript.
(source: google.com)
Timeline has all of this plus rendering and loading information. Timeline data is exposed via Remote debugging API as well as any other data DevTools has.
Related
I'm working on an app on my machine and run it on local host. Sometimes browsers dev tools are not accurate and once I am making the changes in my code and then run, it doesn't look like how it was in dev tools. I'm talking about some alignment, responsiveness, not about styling, colors etc.
When I am comparing my app in different browsers it doesn't look the same in all of them, so I'm no sure which one is actually the accurate view.
I have tried Edge, Opera, Mozilla, Chrome. My company is monitoring my pc, so I can't install random stuff on it.
Is there any other option to preview accurately my app? Any extension or some site?
Thanks in advance.
You can always use other browsers like Opera which has developer mode, as well as, Microsoft Edge and Safari that offer web development tools. As for the alternatives for Firefox, I believe it was already answered, check this: What are the alternatives to the Firefox Developer Tools?
Moreover, these might not directly solve your problem but if you are looking for plugins or apps, check these useful tools out: Plunker, Percy, Ghost Inspector, Requestly.
I have a PWA that saves data locally to indexedDb. Works fine. But I feel hampered by a lack of an editor like SSMS for SqlServer. To make a small change, I have to edit code.
I wondered if anyone had seen any tools (it looks like a chrome extension could do it) that might be useful? I'm working with Blazor (have a lot of Vue.js and Vanilla JS experience, but Blazor is just more productive).....so a component I could add to my application would be a major bonus!!
Prefer to avoid homebrew if someone has something already.
What do you mean by
so a component I could add to my application would be a major bonus
To inspect and make changes directly in the browser have a look at the Chrome DevTools.
I am trying to see if there is anyway I can programmatically typing into chromium's omnibox via script/automation/etc for Perf testing.
I want to test the following:
1. Client side: for each keystroke in Omnibox, I want to measure the rendering speed of the Omnibox when there are suggestions coming from server side. This is logged in the histogram right now.
2. Server side: for each keystroke in Omnibox, I want to measure the response time. This is also logged in histogram right now.
And we want to run across many keystrokes, with different queries to cover above 2 areas automatically.
I know chromium's test framework Catapult has benchmarks measure the Perf/system health, however the current tests are only for Chrome Android mobile apps. Not for chromium desktop app.
And I don't see any existing tests in Catapult that can control the chromium desktop app's omnibox and simulating typing into the omnibox.
Is there any way I can do this, it does not need to be Catapult framework.
If you find an issue in "rendering" (Which you have not defined as common or technical), who do you expect to report this to for a defect report and a fix on your timeline?
I'm diving into the world of Chrome Extension development, primarily because there is a very small feature that is missing in Chrome that I miss dearly. The context-menu option to "Set as background/wallpaper" like that found in Firefox. Sounds trivial, but it's convenient.
I have most of the "basic" stuff worked out with the manifest file, am able to install it, even managed to get it to show up as a context menu item.
The problem obviously is that I am wanting to mess with a user's OS-level settings which is extremely difficult because of security issues (fully understand this).
I found an extension that allowed this in older versions of Chrome, and it looked like the developer used some type of .dll and C++ to accomplish this.
I'm not really sure how to make this work.
Since that Chrome doesn't allow these kind of manipulations (such as your PC's settings), you will need to create a native application that will run beside your extension. When the user chooses the image from your extension and selects "use as wallpaper", you will use the native messaging API to send a message to your desktop application, that will set the wallpaper (and do whatever else you can't do within a chrome extension) for you.
You can use the chrome.wallpaper app api to set the wallpaper after using the messaging api to send the image from your extension.
I'm working a lot with the chrome developer tools to develop web applications. Currenty in one big project we have an application which features its own JSON-format for requests to the server. The JSON objects sent contain various information about the type of the request and its data and so on.
Is there an opportunity to extend chromes developer tools (especially the network view) with a special view which displays the data from the request in a way that makes it more readable for developers working with the project?
I tried to find out about extending the tools but i don't know really where to start. I found some information how i can add tabs and pages to the developer tools but nothing about how i can get the request / response information to display them.
There is no standard API to extend the network view of the developer tools. If you're happy with using a custom devtools tab, use the chrome.devtools.network API to filter and format responses, and render it in your tab.
If you're adventurous, you can use the next approach to directly modify the content of the network view.
First, you need to know how to debug the devtools.
Open the developer tools (F12).
If it's docked, undock it.
Press F12 to open the devtools of the devtools.
Then, you need to use your debugging/coding skills to find out which methods are responsible for rendering the network panel (tip: use DOM breakpoints to quickly discover where to start).
Write code which transforms the network tab to the desired format (either by monkey-patching, or by hooking up on the event you've found at the previous step).
At this point, you know how to change the lay-out of the network tab. Now, you need to permanently activate the code for your developer tools. I've explained two of such methods at How to inject javascript into Chrome DevTools itself.
You could download a copy of Google Chrome's source code and play with it; it's written in C++.
/trunk/src/chrome/browser/devtools looks to be the correct dir to look at.
You can make use of chrome.devtools.network.onRequestFinished. For more control and advanced information you can use chrome.webRequest api.