dominikbulaj
9/25/2014 - 5:32 PM

108 byte CSS Layout Debugger

108 byte CSS Layout Debugger

test.html
content_copyfile_download
<!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 -->
package.json
content_copyfile_download
{
  "name": "CSSLayoutDebugger",

  "description": "A helper for debugging CSS layouts",

  "keywords": [
    "css",
    "layout",
    "debugger"
  ]
}
index.js
content_copyfile_download
function(a){return [].forEach.call(document.querySelectorAll(a),function(b){b.style.outline = "1px solid #" +(~~(Math.random()*(1<<24))).toString(16)});}
annotated.js
content_copyfile_download
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.
}
README.md
content_copyfile_download
  • Rendered
  • Source

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%`)

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