DevTools Tips

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.

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

Gif animation showing how adding the rule in the styles pane if chrome devtools outlines all elements in the page