Skip to content

Instantly share code, notes, and snippets.

@AliMD

AliMD/AliMD-CSS-Layout-Debugger.md

Last active December 11, 2020 01:12
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save AliMD/9d44225430cb3e3cbb23f25df10ec006 to your computer and use it in GitHub Desktop.
Save AliMD/9d44225430cb3e3cbb23f25df10ec006 to your computer and use it in GitHub Desktop.
Download ZIP
AliMD CSS Layout Debugger
Raw
AliMD-CSS-Layout-Debugger.md

CSS Layout Debugger AliMD Edition ;)

Outlines every DOM element on your page a random (valid) CSS hex color.

[].forEach.call($$('*'),el=>{el.style.outline=`1px solid hsl(${~~(Math.random()*360)},99%,50%)`})

screen shot 2018-02-10 at 2 01 00 pm

@alirni
Copy link

alirni commented Feb 14, 2018 •
edited

Your code only works in Chrome DevTools

for works in project use document.querySelectorAll('*') instead $$

[].forEach.call(document.querySelectorAll('*'), el => { el.style.outline = `1px solid hsl(${~~(Math.random() * 360)},99%,50%)` })

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