How to force horizontal panel layout for Chrome

Updated . Posted . Visible to the public. Repeats.

Chrome's developer tools automagically choose vertical or horizontal panel layout, based on their width. You can disable that magic.

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.

Alternatively, press Ctrl+Shift+P and search for "panel layout".

Wat?

Vertical means that the DOM tree is next to the styles/etc panel, like so:

vertical layout example

As you can see, that layout is very impractical for deeply nested DOM trees.

When docking the dev tools on the right side of your browser window, you almost always want a horizontal layout where the DOM tree is above the styles panel which can then show the computed styles:

horizontal layout example

Arne Hartherz
Last edit
Dominik Schöler
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2016-07-21 10:52)