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.