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

heldr commented Sep 30, 2014

I wrote a togglable bookmarklet based on the results already reached

javascript:!function(a){for(a.__CSSDebug__=!a.__CSSDebug__,i=0;A=document.all[i++];)A.style.outline=a.__CSSDebug__?"solid hsl("+9*(A+A).length+",99%,50%)1px":null}(window);

@addyosmani
Copy link
Author

This version should play better with Polymer and Custom Elements (94 bytes):

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

@JotFX
Copy link

JotFX commented Oct 10, 2014

Hi guys, some hours ago I twittered another version, but that relied on the 108 byte version. I tinkered with the golfed down version above and now its 79 bytes and should still work fine:

for(i=0;A=$$("*")[i++];)A.style.outline="1px solid #"+(i*999%4096).toString(16)

The coloring should be as distinguishable as the random version. Not sure if the first element gets a valid color coding.

@markyun
Copy link

markyun commented Oct 11, 2014

mark

@amirouche
Copy link

modified the "every element gets a color" to use hsl:

[].forEach.call(
    document.querySelectorAll("*"),
    function(a){
        a.style.outline="1px solid hsl(" + Math.random() * 360 +", 70%, 70%)";
    }
)

@shmdhussain
Copy link

Once I enabled the outlines, how could I undo it? Thanks For any help in advance.

@jbmartinez
Copy link

@shmdhussain reload/refresh the page

@addyosmani
Copy link
Author

Reloading the page will remove the outlines :)

@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 •
edited
Loading

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 •
edited
Loading

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 •
edited
Loading

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 •
edited
Loading 

# ~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 •
edited
Loading

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 •
edited
Loading

@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 •
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