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

Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.

Categories: Supported by:

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:

In Polypane:

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.

See also