nucliweb
9/27/2014 - 2:35 PM

LICENSE.txt

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 Debbuger

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.

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

LICENSE.txt
content_copyfile_download
            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2014

 Copyright (C) 2014 Addy Osmani @addyosmani

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.