Layout debugging

With the shortcut ⌘ d you can quickly toggle layout debugging in your panes. This adds outlines to all the HTML elements on the pages letting you quickly analyze the HTML structure and find out which elements are causing layout issues.

It's like adding * { outline: red}, except much faster with different colors for different elements and support for pseudo elements.

This debug tool can also be applied on a single pane using Debug tools, where it's called "Layout debugging".

Indicator in address bar

When layout debugging is active, a small indicator will appear on the right in the address bar. This way you can quickly see if the global layout debugging is active.

Click the indicator to disable layout debugging.