It is possible to use regular expressions in Watch tab (Sources tab) in Chrome dev tools?
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?
Suppose you have too many tabs opened inside "Source" in chrome developer tools. How to switch among those files using a keyboard?
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.
When you click a target='_blank' link, it naturally opens a new tab in Google Chrome. For particular sites, I need to use the Chrome Developer Tools to examine the http requests for any new tabs that are opened.
Whenever you have Chrome Dev Tools open on your current page and then click a link that opens a new tab, Chrome Dev Tools are not opened on the new page by default. Opening Chrome Dev Tools at this point is too late because the tools do not capture the http requests for the page.
Also, in many cases, these new tabs go through a series of redirects before reaching the final page, so I cannot simply reload the page after opening Chrome Dev Tools.
The only workaround I can think of is, in the case that the site I'm working on is on a local development server, I can temporarily change the link from target='_blank' to target='_self', but this is unrealistic for a site with thousands of links or for a site that I have no control over the code.
Is it possible to set Chrome Dev Tools to automatically open with every new tab (opened either manually or via target='_blank'?
I'm not sure as of which Chrome version this changed, but if you click on the Settings wheel on dev tools:
You'll see a Global section with a checkmark for "Auto-Open DevTools for popups", which works for opening target="_blank" links with a devtools window:
It's possible to auto open devtools for all the new tabs instead of just target = _blank. When launching google chrome, pass the flag --auto-open-devtools-for-tabs. It enables launching of devtools for all the windows created automatically.
For linux
google-chrome --auto-open-devtools-for-tabs
For Mac
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
You can only open DevTools window via UI action or keyboard shortcut. There is no way to do this automatically.
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.