A one-line CSS layout debugger
When a layout is behaving strangely, it helps to see the box around every element. Paste this line into the DevTools Console and it will add a different coloured outline to each DOM element:
$$('*').map((A,B)=>A.style.outline=`1px solid hsl(${B*B},99%,50%)`)
The colours are not important. Their job is to make nested and overlapping boxes easy to tell apart without changing the layout, as borders sometimes do.
Reload the page when you want to remove the outlines.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- Making Links Easy to Recognize
Make links recognisable with underlines, clear focus states, useful text, and behaviour that does not surprise the reader.
- When CSS Layout Order Stops Matching the HTML
Keep Grid and Flexbox layouts aligned with the HTML order so keyboard focus and screen reader reading do not jump around the page.
- Keyboard Focus Styles With :focus-visible
Keep a clear keyboard focus indicator while avoiding the same focus ring after every pointer interaction.