Read more

How to force horizontal panel layout for Chrome

Arne Hartherz
July 21, 2016Software engineer at makandra GmbH

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

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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.

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

Posted by Arne Hartherz to makandra dev (2016-07-21 12:52)