Skip to content

Instantly share code, notes, and snippets.

@alexbenic

alexbenic/README.md

Forked from addyosmani/README.md
Created October 12, 2016 18:46
Show Gist options
  • Save alexbenic/d0af3cc801a20190b5a466f42ceb9dd2 to your computer and use it in GitHub Desktop.
Save alexbenic/d0af3cc801a20190b5a466f42ceb9dd2 to your computer and use it in GitHub Desktop.
Download ZIP
108 byte CSS Layout Debugger
Raw
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)})

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

Raw
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.
}
Raw
index.js
function(a){return [].forEach.call(document.querySelectorAll(a),function(b){b.style.outline = "1px solid #" +(~~(Math.random()*(1<<24))).toString(16)});}
Raw
package.json
{
"name": "CSSLayoutDebugger",
"description": "A helper for debugging CSS layouts",
"keywords": [
"css",
"layout",
"debugger"
]
}
Raw
test.html
<!DOCTYPE html>
<title>CSS Layout Debugger</title>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<script>
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('*');
</script>
<!-- quick JSBin:http://jsbin.com/soseq/2/edit -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment