DevTools Tips

Draw a box around all elements to debug your CSS and page structure

Simple, yet powerful, * { outline: 1px solid red; } is a useful debugging trick that helps understanding the page structure, finding overflow bugs or understand why elements are being pushed away for no apparent reason.

In Edge, Chrome, Firefox and Safari:

  • Go to the Elements panel (in Chrome, Edge or Safari) or Inspector panel (in Firefox).
  • Click the + (new style) icon in the Styles or Rules sidebar.
  • Add the rule { outline: 1px solid red; } to the CSS Selector *.

In Polypane:

  • Press ctrl/cmd + d to automatically add outlines around all elements.

And voila! All elements are outlined and you can understand what's going on.

Animation showing how adding the rule in the styles pane if Chrome DevTools outlines all elements in the page.