CSS Debugger

May 10, 2022

To create debugger for CSS, there are 2 great ways to do:

Outline

Instead of using border (which taking space and can cause more overflow issues), use outline. It draws a line around every element without affecting the actual layout space.

* {
  outline: 1px solid red;
}

Background color

Outlines can sometimes get messy if you have a lot of nested elements. A great alternative is applying a semi-transparent background color.

* {
  background: rgb(255 0 0 / 10%);
}