Is there a way to view multiple Chrome devtools panels at the same time? A split window, like this mockup, would be nice:
Or in separate windows.
It would be extremely useful to be able to view the Sources panel and Network panel at the same time, to see exactly when network requests are fired while stepping through code.
The console can be pulled up while inside any other panel by clicking or pressing esc, so why not the other panels?
I haven't found much by searching, but maybe this is possible with a devtools extension.
Does this exist already? If not, is it possible?
I find this limitation frustrating too, all those other monitors are wasted! Here is poor man's solution:
launch your chrome with --remote-debugging-port=9999 command line parameter
right click on your page to debug and select 'Inspect Element' - this is your debug window #1
open a separate chrome window and navigate to chrome://inspect
click 'Configure...' and add localhost:9999
within a couple of seconds under 'Remote Targets' you should see tabs you can inspect from your other chrome instance
click on the tab, and now this is your debug window #2
Unrelated tip: system wide nightmode experience: http://danielsokolowski.blogspot.com/2018/11/windows-10-8-7-night-mode.html
As of Chrome Canary 33.0.1732.0, there's a "Show editor in Drawer" experiment. The editor shows up whenever you hit any anchor to the source code in DevTools.
Related
I always use different windows of Chrome during development, and for each window I have to open a devtool window as well.
Every time I have to navigate between those windows, or I have to switch between IDE and devtool, I have to click on the right minimized devtool, and sometimes it's quite difficult because they have the same title.
I know, I could press F12 again on the window I need to maximize the right devtool, or I can maximize once the right one, and then switch between IDE and the devtool with Alt+Tab.
I could use also JavaScript to change the title, but it would last just until the next reload.
I think that give a specific name to the devtool window would speed up my work. In this way, I could identify immediately which devtool I need. For example I could rename a window "mobile" and the second one "desktop".
There is any way to do it?
There's no such feature so you can request it on https://crbug.com.
Meanwhile here's a workaround:
open devtools-on-devtools
run this console command in its window:
document.title = 'whatever'
save this command in devtools snippets to quickly re-run it later.
How to open devtools-on-devtools:
Open devtools first and switch its Dock side in the menu to a detached (floating) window
in the now detached devtools press CtrlShifti or ⌘⌥i on MacOS,
which will open devtools-on-devtools in a new window
I would love it if there was a hotkey, or some other method I could use to avoid having to use the mouse to constantly re-open this window whenever I redeploy my app.
Alternatively, is there a way of re-using an opened device inspector window that I'm unaware of?
chrome://inspect URL can be a good option.
But, what IS chrome://inspect? Well that's a global development tools page. It opens on the "Devices" tab by default, so that's handy.
I searched for a keyboard shortcut, but sadly I didn't discover any.
You could bookmark chrome://inspect and put a shortcut on your desktop by the way (except for Chromebooks, which is what I wrote my answer with)
From there, you can jump to inspection of any open page in your Chrome browser, which is nice too.
Alternative: When undocked, the Inspector will have the Console in the bottom. Well on the bar above the console, the leftmost three-dot menu has a direct "Devices Inspector" option.
I use os x and use Cmd+Opt+I Hotkeys to open Inspector in chrome.
You can find more hotkeys here
Hope this helps
Thanks
I'm trying to debug a Chrome Extension but every time I refresh it, the developer tools window that is associated with the extension closes. Does anyone know if there is a way to keep it open?
Here's what I'm doing: I click the extension button, which opens a popup window. I then right click it and click "Inspect". That opens the Developer Tools. Now if I click the extension button again to refresh it (when I update code), the Developer Tools closes. :(
There are two ways to accomplish this.
Click on the Dev Tools popup so the window is focused and then press F5. This will reload the popup and Dev Tools, and will not cause the Dev Tools window to close.
If that doesn't work for you, go to chrome-extension://extensionid/path/to/popup.html on a separate tab on Chrome. From there, you can inspect element, and refreshing the file will not cause Dev Tools to close.
Dev Tools are closing because hosted page is closing (the popup). The view and it's logic stops working if you close the popup so there's nothing to inspect.
If you'd like to debug background page it will not close with the popup since it is running in background. That's all you can do.
I frequently use the overrides tab in Chrome Developer tools to emulate other device such IPhone and IPad, but after upgrading to last version (32.0.1700.76 m) everything in the overrides tab is gone and replaced by a checkbox saying "Show 'Emulation' view in console drawer".
Checking this checkbox does not enable a 'Emulation' view in the Console drawer. The "Show Console" button seems to be disabled.
See here for more information.
Before starting open the dev tools console (on a Mac cmd-option-i)
Open the Settings panel within the dev tools console (click gear icon on right side)
Check "Show 'Emulation' view in console drawer (looks like you have already done this step) and close screen
Switch to the sources tab of the dev tools console
Press Esc to bring up a screen that slides in from the bottom
Select the Emulation tab on that second screen
There is also a note in the link above stating:
Note: Emulation tools within DevTools were previously contained within
an Overrides pane inside the Settings panel. The Emulation panel is
the new Overrides pane.
After installing Chrome (or the bleeding edge version Chrome Canary) you should be able to do proper mobile emulation within Chrome's Developer Tools. I usually activate them by Right Clicking > Inspect Element
For visual learners like myself, I just included a full screenshot.
I'm running Google Chrome version 58.0.3029.110, where the Emulation is no longer available, but all of the features are still available:
Device & Screen
Press Ctl + shift + m or click on Toggle device toolbar, you'll find these in the upper middle of your browser tab. (You'll find more options in the More option section.)
User Agent & Sensors
User Agent is now renamed as Network Conditions and can be found in the Customise and control DevTools > More tools > Network conditions. Sensors can also be found in the same location (ie. Customise and control DevTools > More tools > Sensors).
"Show Emulation view in console drawer" message confusing.
Generally our chrome dev tool bar tab selected as a console tab or we try to find out in console tab.
Problem is , Console drawer will not opened when your console tab selected.
I seem to have solved it. When I upgraded to Chrome Canary (Version 34.0.1789.0 canary) the problem was solved.
http://www.google.co.uk/intl/en/chrome/browser/canary.html
I run into this problem, and it took me a while to figure it out, despite the answers here. I am on Version 37.0.2062.103 m. First, in this version, there is no Override pane, neither "Show 'Emulation' view in console drawer either. It is turned on by default (I guess), but a little bit hidden. The key is to first press ESC key in dev mode (now I'm not sure if it's on by default). You should see a pane with 4 "tabs" including "Emulation" at the bottom. I quoted tabs because it appeared more like a status bar to me and I keep clicking it and nothing happens, until I accidentally resized the pane.
Sweet... This behaviour (running device emulation and debug mode) works in Chromium on Linux Ubuntu by hitting F12 and then the drawer icon. :)
More info:
Some more info, including screenshots
According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.
To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.
And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/
Follow these easy steps!
Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:
Press Command+Option+i again on this new window.
That will open the DevTools on the DevTools.
You can redock the page's DevTools if you want.
If it's not already, select Elements — it's the first icon at the top of the inspector.
A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.
Open chrome://inspect
Open the inspector on that page (cmd + alt + i)
Scroll to the bottom of the page, under the Other section click the inspect link
The URL in the Other section should look something like this:
chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…
EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.
I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.
on OSX, open an terminal window and execute the following:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
On windows, Its
chrome.exe --remote-debugging-port=9222
(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)
This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.
If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)
Now, go ahead and navigate to
http://localhost:9222
It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.
Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.
A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.
Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..
Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.