Menu
The tools are opened on the bottom of the chrome window per default. This is a rather bad choice for a wide screen display since there is plenty of empty space to the right but not much vertical space to spare. Unfortunately, I have found no way to reposition the tools. I would like to have them on the side, similar to firebug.
The only option similar to what I want is to detach the dev tools and place chrome and the tools window side-by-side. This is not very convenient for quickly alt-tabbing from the IDE to the browser and back though, so an "integrated" solution would be nice.
423
Change where DevTools is docked by using the Command Menu Or, press Shift + Ctrl + P on Windows/Linux or Command + Shift + P on macOS.
In the developer tools, klick the cogwheel icon (or press F1 when focusing the dev tools) to open the settings overlay. Under "Preferences", in the "Appearance" section, find the "Panel layout" option. Set it to your liking.
You can move tools between the main panel and the drawer. To move a tool from the drawer to the main panel, right-click a tool, and then select Move to top. To move a tool from the main panel to the drawer, right-click a tool, and then select Move to bottom.
Run one of the following commands: Dock to left , Dock to right , Dock to bottom , Undock into separate window or Restore last dock position . To toggle Restore last dock position with a keyboard shortcut, press Control + Shift + D (Linux/Windows) or Command + Shift + D (Mac).
Click the vertical ellipsis button ( ⋮ ) then choose the desired docking option.
Long-hold the dock icon in the top right. It pops up an option to change the docking
To change the split between the HTML and CSS panels, go in DevTools to Settings (F1) > General > Appearance > Panel Layout.
68
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
