Skip to content

Instantly share code, notes, and snippets.

@alexbenic

alexbenic/README.md

Forked from addyosmani/README.md
Created October 12, 2016 18:46
Show Gist options
  • Save alexbenic/d0af3cc801a20190b5a466f42ceb9dd2 to your computer and use it in GitHub Desktop.
Save alexbenic/d0af3cc801a20190b5a466f42ceb9dd2 to your computer and use it in GitHub Desktop.
Download ZIP
108 byte CSS Layout Debugger
Raw
README.md

CSS Layout Debbuger

A tweet-sized debugger for visualizing your CSS layouts.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 110 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)});

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):

Raw
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 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.
}
Raw
index.js
function(a){return [].forEach.call(document.querySelectorAll(a),function(b){b.style.outline = "1px solid #" +(+~~(Math.random()*(1<<24))).toString(16)});}
Raw
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.
Raw
package.json
{
"name": "CSSLayoutDebugger",
"description": "A helper for debugging CSS layouts",
"keywords": [
"css",
"layout",
"debugger"
]
}
Raw
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 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment