Skip to content

Instantly share code, notes, and snippets.

@addyosmani

addyosmani/README.md

Forked from 140bytes/LICENSE.txt
Last active October 17, 2024 13:41
Show Gist options
  • Save addyosmani/fd3999ea7fce242756b1 to your computer and use it in GitHub Desktop.
Save addyosmani/fd3999ea7fce242756b1 to your computer and use it in GitHub Desktop.
Download ZIP
108 byte CSS Layout Debugger
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

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 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.
}
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
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 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 -->
@n00b21337
Copy link

I made a module for drupal inspired by this code https://www.drupal.org/project/css_debuger
I added option to show/hide boxes with alt+c

@shinsenter
Copy link

Very useful. String interpolation does not work on IE.

@shinsenter
Copy link

Here is bookmarklet version:

javascript:[].slice.call(document.querySelectorAll("*")).map(function(l,e){l.style.outline="1px solid hsl("+(e*e)+",90%,50%)"})

@noobalex
Copy link

Perhaps you need a bookmark to restore the layout

javascript:[].slice.call(document.querySelectorAll("*")).map(function(l,e){l.style.outline="none"})

@y4rr
Copy link

y4rr commented Dec 27, 2020 •
edited
Loading

Perhaps you'd like to have just one bookmarklet instead of two. And nicer colors.

Properly escaped code for the bookmarklet:

javascript:(function()%7B%5B%5D.slice.call(document.querySelectorAll(%22*%22)).map(function(l%2Ce)%7Bl._CSSDEBUG%3D!l._CSSDEBUG%3Bl.style.outline%3Dl._CSSDEBUG%3F%22solid%20hsl(%22%2B(l%2Bl).length*13%2B%22%2C45%25%2C55%25)0.1rem%22%3A%22initial%22%7D)%7D)()

Source:

javascript:[].slice.call(document.querySelectorAll("*")).map(function(l,e){l._CSSDEBUG=!l._CSSDEBUG;l.style.outline=l._CSSDEBUG?"solid hsl("+(l+l).length*13+",45%,55%)0.1rem":"initial"})

@dziku86
Copy link

dziku86 commented Feb 21, 2021

1 byte can be shaved with Q unit if you are not using Safari/IE:

$$('*').map((A,B)=>A.style.outline=`1q solid hsl(${B*B},99%,50%`)

@amir2mi
Copy link

amir2mi commented May 18, 2021

57 bytes:
[...document.all].map(a=>a.style.outline="1px solid red")

Hi, @streamich thanks! it is possible with CSS, the random color is the point.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment