Skip to content

Instantly share code, notes, and snippets.

@addyosmani
Forked from 140bytes/LICENSE.txt
Last active September 4, 2024 11:40
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.
108 byte CSS Layout Debugger

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

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.
}
function(a){return [].forEach.call(document.querySelectorAll(a),function(b){b.style.outline = "1px solid #" +(~~(Math.random()*(1<<24))).toString(16)});}
{
"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 -->
@daliborgogic
Copy link

daliborgogic commented Jul 29, 2017

# ~66 bytes
$$('*').map((A,B)=>A.style.outline=`1px solid hsl(${B*B},99%,50%`)
# ~64 bytes but not so colorful
$$('*').map((A,B)=>A.style.outline=`1px solid hsl(${B},99%,50%`)

rainbow

@streamich
Copy link

streamich commented Sep 8, 2017

57 bytes:

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

@nitinja
Copy link

nitinja commented Oct 27, 2017

I think we should try to minimize the number of outlines. More dom elements present on the page, slower it gets.

@addyosmani
Copy link
Author

@daliborgogic Nice work further code-golfing! Looks pretty alight :)

image

@daliborgogic
Copy link

daliborgogic commented Dec 21, 2017

@addyosmani Thank you : )

@daliborgogic
Copy link

@nitinja I agree, but this is not for production.

@boi23
Copy link

boi23 commented Aug 20, 2018

Im havin trouble with my css can u help me

@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

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