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 -->
@lukechilds
Copy link

81 bytes if es2015 is allowed.

for(i=0;A=$$("*")[i++];)A.style.outline=`solid hsl(${(A+A).length*9},99%,50%)1px`

@lukechilds
Copy link

Actually, make that 77.

$$("*").forEach(A=>A.style.outline=`solid hsl(${(A+A).length*9},99%,50%)1px`)

@addyosmani
Copy link
Author

addyosmani commented Sep 26, 2016

Nice golfing, @lukechilds. On first try, seems to be working well with the latest ES2015 version:

screen shot 2016-09-26 at 3 41 12 pm

Need to do a little work comparing effectiveness of the randomisation approaches on-thread, but imagine that won't matter hugely to some folks.

@lukechilds
Copy link

@addyosmani 74 bytes. We're almost at half a tweet.

for(A of $$('*'))A.style.outline=`solid hsl(${(A+A).length*9},99%,50%)1px`

Ok, I think I'm done.

@zak905
Copy link

zak905 commented Sep 27, 2016

Cool! this should be integrated into chrome

@JyotiDuhan
Copy link

Hi,
Can anyone tell me what is the purpose of using this? I loved to see my page layout in multiple color blocks though :)

@xem
Copy link

xem commented Oct 12, 2016

73b, did I win?

$$('*').map(A=>A.style.outline=`1px solid hsl(${(A+A).length*9},99%,50%`)

@shockw4ver
Copy link

shockw4ver commented Nov 29, 2016

It's likely to build a simple plugin integrated into browser and make it easy to clear a page.
Excellent!

@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