Dear Console, outline all elements on the page with a unique color per tag

$$('*').forEach(el => {
    let col = el.tagName.split('').
        reduce( (sum, c) => sum+=c.charCodeAt(0), 0) % 360;
    el.style.outline = `1px solid hsl(${col}, 99%, 50%)`
})

by Pankaj Parashar 🎉

Topics: css, debugging

Show all 21 "Dear Console" snippets

What?

This is a repository of little scripts you can use in the browser console to achieve the described task. Hence, "Dear Console,…".

How?

To use the scripts shown here, you need to open the browser developer tools (pressing F12), open the Console tool, paste them in and hit `Enter`. If you use a Chromium based browser (Chrome, Edge, Brave, Opera, Vivaldi…) you can also use them in Snippets.

Who?

This collection is written and maintained by Chris Heilmann and you can contribute to it or request features on GitHub.