Was reading using the chrome dev tools new code coverage feature and was having trouble trying to enable this feature.
I know that Canary enables this without the need to unflag, but I'm unsure where to locate this feature from within Chrome Devtools.
With the developer tools window open, you can open the command menu using Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux), start typing Coverage and then select Show Coverage:
Alternatively, you can also select the three dots on the far right of the developer tools window, select More Tools and then select Coverage:
It wasn't mentioned in the above post, but if you click the three dots in Chrome dev tools, the option for code coverage is shown in the menu.
Related
There's a bug on Vivaldi browser which will probably remain unfixed for the upcoming months: undocked dev tools windows do not remember their previous size across tabs, so each time you open dev tools they are small. There's also another dev tools bug which I'd like to workaround which includes focusing the dev tools window. Those bugs are driving me nuts!
So, I tried to create a Chrome extension and see if that could catch the dev tools opening event and resize the dev tools undocked window.
The first part, I've done it by using a content script which catches f12 and ctrl+shift+i and other ways of opening dev tools. Then, the content script sends a message to a background script and it should resize the opened dev tools window.
Here's the problem: there doesn't seem to be any way to get opened dev tools window in Chrome Extension API.
I can get all the opened normal windows, but from that same API (chrome.windows) I can't find opened dev tools windows.
Is there any way one can access opened dev tools windows?
I tried using chrome.devtools API but that's only accessible inside dev tools panels.
Being this a private extension which will never get published, I can also try to use chrome.developerPrivate and other private APIs, but I don't know how to make them work.
Do you have any idea on how to proceed to get all opened dev tools windows? Could it be there isn't a way?
If there isn't a way, could you maybe point me in the right direction into using private Chrome APIs in any way?
Is it possible to enable autosave on snippets in chrome dev tools?
It is infuriating when i accidentaly close a tab that dev tools was attached to where i had my snippets open and when i open dev tools again i've lost alot of work!
Are there any flags i can set to enable autosave or somehow get it to save when i run the snippet?
Just to be clear i am talking about the snippets under Sources/Snippets.
I know i can "just" use the shortcut ctrl-s to save however that is simply not good enough, i would atleast expect a recovery like all modern editors deliver.
Incase this cannot be achieved please point me the in direction where i can submit a feature request to the Chrome Dev Team
Select Tools > Developer Tools. The Developer Tools window opens as a docked panel at the side or bottom of Google Chrome. Click the Network tab. Select Preserve log.
Also, go to Settings in devtools, which is a little screw on the top-right corner, find the Console section under Preferences, and click on Preserve log upon navigation.
This has worked for me.
As you probably know, Chrome Dev Tools has the same icon as browser itself. In order, to increase productivity I would like to change it's icon, so it will be easier to find it in the taskbar.
Thanks in advance.
Give this a try:
Open up Chrome and then open up developer tools in another window so that you have two Chrome icons on your taskbar. Right click the devtools one and Pin to taskbar.
Right click on the newly pinned icon, right click on Google Chrome (2) and properties.
Under Shortcut->Change Icon, pick something else. Then 'OK' out.
You'll need to restart explorer.exe, so open Windows Task manager, kill explorer.exe and restart it.
You'll now see two different icons.
Do this: Start regular Chrome. Then CTRL+Shift+i and it should open devtools as the new icon.
Unfortunately, clicking the devtools icon initially will not open devtools on startup. Supposedly you can change the properties to start using chrome.exe --args --auto-open-devtools-for-tabs but I was unable to make that work.
YMMV with your operating system but this works with Windows 7. Hope that helps.
Note: If you're using Windows 10, you won't see explorer in the task manager by default, you have to click "More details" on the bottom and switch to the "Details" tab.
Alternatively, open PowerShell and type:
Get-Process explorer -ErrorAction SilentlyContinue | Stop-Process
This will kill explorer, and windows will automatically restart it
This answer may be a nice work around for non-Windows users who are debugging from Visual Studio Code. It uses Chrome's Canary build for debugging. It has a different icon so telling it apart from regular Chrome should be easy.
This answer talks about setting the executable to Canary which is easily distinguishable from regular Chrome. You will need to download the Canary version of Chrome first.
settings.json:
"runtimeExecutable": "canary"
How to configure Visual Studio Code debugger to use Chrome Canary?
I am using chrome version 36+
according to this page, I should be able to allow custom themes using the following instructions:
Installation Instructions
Add this theme
Goto chrome://flags and Enable Developer Tools experiments.
Open developer tools settings, select Experiments tab, and check 'Allow custom UI themes'.
Reload devtools.
I do not see such a tab in the dev tools settings. I see only 'general', 'workspace', and 'shortcuts'
These are some simple steps to follow, hope it will be helpful.
Open a new chrome tab, type chrome://flags
Find, "Enable Developer Tools experiments." using ctrl/cmd+f or simply searching for it by scrolling down the page.
Click the "enable" link
Click on "Relaunch Now" at the bottom of the page.
After restarting Chrome, open DevTools, DevTools settings, and select the experiments tab.
Now select the experiment you want (e.g. "Allow custom UI themes").
You need to reload devtools after: Alt-R will reload devtools itself, or you can just close and reopen it.
To get to the Dev Tools Experiments area you have to click on the gear icon in the inspector.
If still not working you should go to:
chrome://extensions/
And click the 'Enable' checkbox for the DevTools extension you wish to enable.
Had the same issue,
I found I was going to browser settings which is NOT where you should be going to ,
You need to go to developer setting .
i.e right click>inspect element> dev tools
You need to restart the browser after changing the flag at chrome://flags
I found it. There is a checkbox under experiments tab:
Allow custom UI themes
Restart chrome just not means to close the chrome and then open it. you should click the 'Relaunch Now' button of the flags tab. and then it's work for me.
loislo's answer is absolutely right (You need to restart the browser after changing the flag at chrome://flags). But notice that your chrome can work in the background. Go to the tray, look for the chrome icon and exit.
Navigate to chrome://flags/
Find and enable Developer Tools experiments Mac, Windows, Linux, Chrome OS
Relaunch Chrome, open develop tool, setting, you will see experiments tab.
My Chrome version: Version 61.0.3163.100
2022 update: There doesn't seem to be any option in chrome://flags but there is an option:
devtools > settings > experiments > Allow extensions to load custom stylesheets
I would like to debug my javascript application using Google Chrome 3's developer tools. Everything fine and ok, until I actually want to start debugging. I can set breakpoints etc., but I don't want to debug using a mouse but using keyboard.
In Firefox + Firebug I can use F10, F11 and F8 for stepping over, into and run debugged script.
Are there any keyboard shortcuts in Google Chrome's Javascript console window?
System configuration (if relevant):
Windows Server 2008 R2 (would probably work the same in Windows 7)
Google Chrome 3.0.195.21
Edit
I investigated this issue even further and it turns out to be some sort of a bug, because when I restart Chrome, F8, F10 and F11 work as expected (same as Firebug).
F8 - Run
F10 - Step over
F11 - Step into
Works for me
To see the full list of shortcuts for the currently installed version:
in chrome open the Developer Tools Ctrl+Shift+I and then open shortcut help ?.
Edit: To get list of shortcuts, press Shift + ? when you are in other than 'console' tab, like 'Elements' or 'Resources'
In addition to Chris Tek's answer:
Shift + F11 - Step Out Of
Here is the full list of shortcuts for the latest version of Chrome Developer Tools:
http://code.google.com/chrome/devtools/docs/shortcuts.html
Toggle Breakpoint: Ctrl+B, pretty essential!
https://developer.chrome.com/devtools/docs/shortcuts
A much better reference of Chrome DevTools shortcuts can be found here (https://shortcutref.com/chrome-dev-tools).
This page only shows the relevant shortcuts (level, OS, category) and has short and precise descriptions.