addyosmani/README.md

## README.md

      
    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)})
~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
<!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 -->
	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.
	}
	{
	"name": "CSSLayoutDebugger",

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

	"keywords": [
	"css",
	"layout",
	"debugger"
	]
	}
	<!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 -->