A tweet-sized debugger for visualizing your CSS layouts. Gives 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)})
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.
There are several optimizations made in the comments that improve on the original source - check em' out. One that goes beyond code-golfing in this version by @aemkei that mimics pesticide.io, using a specific color for every tag name:
for(i=0;A=$$("*")[i++];)A.style.outline="1px solid hsl("+(A+A).length*9+",99%,50%)"
Preview: