How to force horizontal panel layout for Chrome

Posted Almost 8 years ago. Visible to the public.

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.

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

horizontal.pngvertical.png
Arne Hartherz
makandra.com
Say thanks14
Last edit
Almost 2 years ago
Arne Hartherz
Attachments
horizontal.png
vertical.png
License
Source code in this card is licensed under the MIT License.

Related cards:

How to: Upgrade CarrierWave to 3.x

While upgrading CarrierWave from version 0.11.x to 3.x, we encountered some very nasty fails. Below are the basic changes you need to perform and some behavior you may eventually run into when upgrading your application. This aims to save you some...

How to build the perfect number of blank records for a nested form

When you render a nested form for a Movie which has_many :actors, you want to render the right number of blank Actor forms. The right number means:

  • A minimum number of blank forms so the user can add more Actors to an existing Movie, ...

CSS: How to force background images to scale to the container, ignoring aspect ratio

You can scale background images in CSS to the container size using background-size (Demo).

Commonly, we use contain or cover because we want to preserve the ima...

Customize tokenization of the MySQL FULLTEXT parser

The way MySQL's FULLTEXT tokenizer splits text into word tokens might not always be what you need. E.g. it splits a word at period characters.

Since the tokenizer has near-zero configuration options (minimum word length and stopwords list), you n...

How to not die with ActionView::MissingTemplate when clients request weird formats

When HTTP clients make an request they can define which response formats they can process. They do it by adding a header to the HTTP request like this:

Accept: application/json

This means the client will only understand JSON respon...

How to disable auto-complete on login forms

Disabling auto-complete in login forms is probably a bad idea, since it encourages weak passwords.

If you are still forced to implement this (maybe due to legal or policy requirements), this is how:

**Prevent browsers from saving the password i...

How to control Chromedriver using curl

Here is how to use Chromedriver without libraries like selenium-webdriver. This can be useful for debugging.

The following example visits a web page and reads the a headline's text contents.

  1. Create a session:

    curl -XPOST http://l...

Invoices: How to properly round and calculate totals

While it might seem trivial to implement an invoice that sums up items and shows net, gross and vat totals, it actually involves a lot of rules and caveats. It is very easy to create invoices where numbers don't add up and a few cents are missing....

How to make Rational#to_s return strings without denominator 1 again

The way Rational#to_s works on Ruby has changed from Ruby 1.9 on. Here is how to get the old behavior back.

You may want this for things where Rationals are being used, like when subtracting Date objects from one another.

What's happening?...

How to fix: "unexpected token" error for JSON.parse

When using the json gem, you might run into this error when using JSON.parse:

>> json = 'foo'.to_json
>> JSON.parse(json)
JSON::ParserError: 757: unexpected token at '"foo"'
	from /.../gems/json-...
Posted by Arne Hartherz to makandra dev (2016-07-21 10:52)
This website uses short-lived cookies to improve usability.
or learn more