Menu
I always have the DevTools showing vertically in my browser as I use a widescreen. I can no longer get the debugger panel to show underneath the source file content.
To clarify which panel I mean, its under 'Sources' tab, then the right 'debugger' panel where you can see Watch, Call stack, Scope, Breakpoints etc. You know, all the useful stuff :D
This panel will only show vertically alongside the source files, instead of where it used to be under the source file. This means I get both the source and debugging tools in a very tall slim window making it impossible to use alongside the actual viewport.
Any ideas how I can move it back?
Edit: Here are screenshots (I found an old one for the 'before'). Notice the panel where you pause, step into/over etc.
Before:
After:
359
You can also change the Chrome DevTools dock position. You can either undock into a separate window, or dock it on the left, bottom, or right side of the browser. The dock position can be changed by pressing Cmd + Shift + D ( Ctrl + Shift + D ) or through the menu.
Change where DevTools is docked by using the Command Menu Or, press Shift + Ctrl + P on Windows/Linux or Command + Shift + P on macOS.
Goto chrome://flags/#enable-devtools-experiments , and enable Developer Tools experiments . Select Relaunch Now at the bottom of the page. F12 to Open developer tools, go to Settings , select Experiments tab, and check Allow custom UI themes .
Go to the DevTools settings, find General > Appearance > Panel layout option and change it to "horizontal".
184
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
