Is it possible to view multiple Chrome devtools panels at once?

Question

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?

Answer 1

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

Answer 2

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.