A tweet-sized debugger for visualizing your CSS layouts.
One-line version to paste in your DevTools
Using $ if your browser aliases it:
~ 109 byte version
[].forEach.call($("*"),function(a){a.style.outline="1px solid #"+(+~~(Math.random()*(1<<24))).toString(16)});Using document.querySelectorAll:
~ 132 byte version
[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(+~~(Math.random()*(1<<24))).toString(16)});| function(a){ // Supply a valid selector (e.g '*' for all) | |
| [].forEach.call( // Convert Nodelist -> Array | |
| document.querySelectorAll(a), // Query for the selector (could be shortened to $() as Chrome & 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. | |
| } |
| function(a){return [].forEach.call(document.querySelectorAll(a),function(b){b.style.outline = "1px solid #" +(+~~(Math.random()*(1<<24))).toString(16)});} |
| 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> | |
| // write a small example that shows off the API for your example | |
| // and tests it in one fell swoop. | |
| var myFunction = function(a){ // Supply a valid selector (e.g '*' for all) | |
| [].forEach.call( // Convert Nodelist -> Array | |
| document.querySelectorAll(a), // Query for the selector (could be shortened to $() as Chrome & 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> |