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
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.
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.
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."
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.
On the left side of the panel that shows, click the overflow menu and select 'Quick source'.
You will now see a small Sources panel.
This is now possible in Chrome 87. Right click Network in the menu and select "Move to bottom"
and it will do this
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With