108 byte CSS Layout Debugger

Xiao-Hu Tai
2019-09-20T11:42:03Z

README.md

CSS Layout Debugger

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.

Screenshots

Tested from Chrome DevTools:

Tested from Firefox DevTools:

Tested from WebKit Nightlies (Safari):

Tested in IE:

Thanks to gregwhitworth for verifying.

Tag Specific Layout Debugging In 82 Bytes

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

annotated.js

| function(a){ // Supply a valid selector (e.g '*' for wildcard)
| [].forEach.call( // Treat Nodelist as an Array (fewer bytes than Array.prototype.forEach.call(...);)
| // Gets the prototype of Array & uses call to execute the function on the NodeList.
| document.querySelectorAll(a), // Query DOM for elements matching the supplied selector
| // (For 108 bytes, use $$() as Chrome, Safari & FF expose it in DevTools)
| function(b){
| b.style.outline = "1px solid #" + // Set the selector outline
| (~~(Math.random()*(1<<24))) // Pick a valid random CSS hex color
| .toString(16)}) // Convert to a base 16 number. BOOM.
| }

index.js

| function(a){return [].forEach.call(document.querySelectorAll(a),function(b){b.style.outline = "1px solid #" +(~~(Math.random()*(1<<24))).toString(16)});}

package.json

| {
| "name": "CSSLayoutDebugger",
|
| "description": "A helper for debugging CSS layouts",
|
| "keywords": [
| "css",
| "layout",
| "debugger"
| ]
| }

test.html

|
| CSS Layout Debugger
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
| I am element
|
| var myFunction = function(a){ // Supply a valid selector (e.g '*' for wildcard)
| [].forEach.call( // Treat Nodelist as an Array (fewer bytes than Array.prototype.forEach.call(...);)
| // Gets the prototype of Array & uses call to execute the function on the NodeList.
| document.querySelectorAll(a), // Query DOM for elements matching the supplied selector
| // (For 110 bytes, use $$() as Chrome, Safari & FF expose it in DevTools)
| function(b){
| b.style.outline = "1px solid #" + // Set the selector outline
| (~~(Math.random()*(1<<24))) // Pick a valid random CSS hex color
| .toString(16)}) // Convert to a base 16 number. BOOM.
| }
| myFunction('*');
|
|