debug.css - The simple CSS debugging utility

debug.css is a little script you add to your webpage that makes it possible to highlight and debug any element from your own CSS code.

Just add debug to any rule's selector, and the matching elements get a red border.

  main .content-wrapper .item, debug {
    display: flex;
    width: 4rem;
    max-width: 10%;
  }

Don't want red? Use debug_blue instead, or any other valid color!

Want a different line width? Use debug_blue_2px instead, or any other valid width!

This very webpage uses debug.css. All elements on the page are highlighted thanks to this simple rule: *, debug_coral_2px {}

Why debug.css?

I'm sure you type outline: 1px solid red; a lot

This little snippet of CSS code (and others just like it) is immensely useful to millions of web developers every day because of its ease of use.
Sure, you can use DevTools to inspect elements and see where they are, and you probably should. But quickly adding a red border, outline, or background color to an element while you're writing CSS is great too. It's like using console.log() in JavaScript even if there are more powerful ways to debug with DevTools. Sometimes it's just simpler!

But outline: 1px solid red; is 23 characters long, and a typo is so easy to make! When you spend your entire day working on CSS, this can quickly become frustrating.

The idea for debug.css came from this discussion on Mastodon.

How to use debug.css

1. Insert the debug.css.js script in your own webpage.
   Use <script src="debug.css.js" defer></script> to avoid blocking the rendering of your page.
2. Add the debug, or debug_pink (or any other color) selector to any rule.
   For example this: header { ... }.
   Becomes this: header, debug { ... }.
3. Reload your page as you normally would.