CSS debug utility

[mhulse]

Here’s a few pretty simple techniques:

Give it borders

.thing {
    border: 1px solid red;
}

Now you can see what thing is doing … Keep in mind, border can affect box model.

Outline everything

/* Click anywhere to outlines (change `*` to a specific element for more control): */
body:active * {
    box-shadow: inset 0 0 0 5px rgba(255, 0, 0, 0.5);
}

The box-shadow can also be applied to a specific rule set.

Use x to turn off properties

Disable property by making it invalid:

.foo {
    color: red;
    border: 1px solid blue;
    xdisplay: block;
}