wbzyl/LICENSE.txt

## README.md

      
    Raw
  

              README.md
            
          
    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.
Improvements

There are several optimizations made in the comments that improve on the original source - check em' out. One that goes beyond code-golfing in this version by @aemkei that mimics pesticide.io, using a specific color for every tag name:
for(i=0;A=$$("*")[i++];)A.style.outline="1px solid hsl("+(A+A).length*9+",99%,50%)"
Preview:


## 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)});}

## LICENSE.txt
            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.

## 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.
	}
	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.
	{
	"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 -->