Skip to content

Instantly share code, notes, and snippets.

@gokulkrishh

gokulkrishh/README.md

Forked from addyosmani/README.md
Last active June 16, 2020 16:32
Show Gist options
  • Save gokulkrishh/0eeb87d41c056eea67bd to your computer and use it in GitHub Desktop.
Save gokulkrishh/0eeb87d41c056eea67bd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

CSS Layout Debbuger

A tweet-sized debugger for visualizing your CSS layouts.

One-line version to paste in your DevTools

Use $ or $$ 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)});

If you're looking for a proper version that uses a set color per tag type, check out pesticide.io.

Raw
annotated.js
function(a){ // Supply a valid selector (e.g '*' for all)
[].forEach.call( // Convert Nodelist -> Array
document.querySelectorAll(a), // Query for the selector (For 109 bytes, use $() 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.
}
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