Inspect CSS with DevTools

DevTools is the tool I use most when I write CSS. Not just for bugs. It’s the fastest way to see what the browser actually did with your rules.

Right-click any element on a page and choose Inspect. The developer tools open with that element selected in the Elements panel (Firefox calls it Inspector). Next to the HTML tree you get the CSS panels.

The Styles panel

The Styles panel lists every rule that matches the selected element, most specific first. For each rule you see the selector, the declarations, and the file and line it came from. Click that link to jump to the source.

Some declarations have a line through them. A crossed-out declaration lost to another rule that set the same property. This is how you answer “why is my color not applied?” in ten seconds instead of ten minutes.

Further down you find rules inherited from ancestors, and at the bottom the browser’s own defaults.

The Computed panel

The Computed panel answers a different question: not which rules matched, but what the final value of each property is, after the cascade, inheritance, and defaults are all resolved.

Here font-size: 1.5rem turns into 24px. color: inherit turns into the actual color. Expand a property and you see the chain of declarations that produced it, with the winner on top.

When the page doesn’t look like your CSS says it should, this panel tells you the truth.

Edit live

You can edit anything in the Styles panel. Click a value and type a new one. Use the arrow keys to nudge a number up and down. Click the checkbox next to a declaration to turn it off. Click in the empty space of a rule to add a new property.

The page updates as you type. I do this every day to try a padding value or test a color before touching the source file.

Be careful with one thing: these edits are temporary. Reload the page and they are gone, because the browser loads the original files again. When you find a value you like, copy it into your stylesheet right away.

Use it to learn

While you go through this course, keep DevTools open next to the page. Every time something surprises you, ask three questions and let the panels answer them:

• which rules matched this element?
• why did this value win over the others?
• what size did the browser calculate for this box?

That last one comes from the box-model diagram in the Layout section. We’ll rely on it a lot once we get to sizing and spacing.