A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$
if your browser aliases it:
~ 108 byte version
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
Using document.querySelectorAll
:
~ 131 byte version
[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
~73 byte code-golfed version by @xem
$$('*').map(A=>A.style.outline=`1px solid hsl(${(A+A).length*9},99%,50%`)
~66 byte code-golfed version by @daliborgogic
$$('*').map((A,B)=>A.style.outline=`1px solid hsl(${B*B},99%,50%`)
If you're looking for a proper version that uses a set color per tag type, check out pesticide.io.
Tested from Chrome DevTools:
Tested from Firefox DevTools:
Tested from WebKit Nightlies (Safari):
Tested in IE:
Thanks to gregwhitworth for verifying.
My original implementation outlined each DOM element on the page with a random (valid) hex color.
Thanks to the work by @aemkei, @p01, @sindresorhus and other commenters, we now have an even shorter version (108 bytes golfed down to 82) that uses a specific hex color per tag name. This lets you visually group elements similar to how pesticide.io does.
for(i=0;A=$$("*")[i++];)A.style.outline="solid hsl("+(A+A).length*9+",99%,50%)1px"
Preview:
Thanks for the awesome help improving this folks <3
73b, did I win?