Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to open multiple instances or split view of chrome developer tools tabs?

I want to debug code at the same time as I see what is being sent on the network tab without having to go back and forth between the Network tab and Sources tab. Is there a way to do this as of chrome Version 52.0.2743.82 or Version 54.0.2810.2 canary?

I know that it is possible to log http request in the console which can be visible with other tabs open but I want the actuall networks tab if possible..

Thank you in advance

like image 695
Cisum Inas Avatar asked Jul 28 '16 11:07

Cisum Inas


People also ask

How do I separate Chrome developer tools?

Just type ctrl+shift+I in google chrome & you will land in an isolated developer window. Show activity on this post. If you need to open the DevTools press ctrl-shift-i. If the DevTools window is already opened you can use the ctrl-shift-d shortcut; it switches the window into a detached mode.

How do I view multiple tabs at once in Chrome?

See two windows at the same time On one of the windows you want to see, click and hold Maximize . Drag to the left or right arrow . Repeat for a second window.

How do I open developer tools in separate Windows?

To open the developer console window on Chrome, use the keyboard shortcut Ctrl Shift J (on Windows) or Ctrl Option J (on Mac). Alternatively, you can use the Chrome menu in the browser window, select the option "More Tools," and then select "Developer Tools."


2 Answers

You can view 'Quick source' while viewing the Network panel (or the other main panels) at the same. This will allow you to view the source and add breakpoints.

However, it's not possible to step through code using the debugging in the split view. Chrome will automatically switch to the Sources tab if you use the shortcuts.

It's also not possible to have an extension running a separate instance of the debugger as the Chrome Debugging Protocol doesn't allow simultaneous clients to be connected.

I will open up a discussion with other Chromium contributors into the feasibility of sharing the debugging controls in the split view. I don't know whether it will or can be done easily. I suspect it's a fair amount of work.

If you would like to set up the split view, as it's useful anyway, go to overflow menu on the right side and select 'More Tools' and then select 'Show console'. This makes sure the panel loads below the main one.

Show console

On the left side of the panel that shows, click the overflow menu and select 'Quick source'.

Quick Source

You will now see a small Sources panel.

Quick Source

like image 122
Gideon Pyzer Avatar answered Oct 11 '22 20:10

Gideon Pyzer


This is now possible in Chrome 87. Right click Network in the menu and select "Move to bottom"

Right click Network

and it will do this

Move any Tab Under other tabs

like image 30
strattonn Avatar answered Oct 11 '22 19:10

strattonn