Debugging CSS

When something looks wrong, DevTools tells you exactly which rules applied and which were overridden. A handful of tricks speeds up debugging.

4 min read Level 1/5 #css#devtools#debugging

What you'll learn

Use the DevTools Elements / Styles panels
Read computed styles
Use outline / background tricks for layout

CSS bugs are usually one of: wrong selector, lost specificity fight, surprise inheritance, or wrong box-model assumption. DevTools answers all of these.

Inspect Element

Right-click any element → Inspect (or Cmd-Opt-I / F12, then the picker icon). Open the Styles / Computed panel.

The Styles Panel

Shows every rule that matches, in order:

Active rules listed top-down
Overridden declarations are struck-through
Inherited rules listed below

You can edit any property right there — temporarily — to see what’d fix it.

The Computed Panel

Shows the final value of every property after the cascade. No strike-through, no “which rule” — just “this is what’s actually applied”.

Click any property to see WHICH rule won.

The Box Model Diagram

In the Computed panel, scroll down to see the box model laid out visually:

        margin
   ┌──────────────┐
   │   border     │
   │  ┌────────┐  │
   │  │padding │  │
   │  │ content│  │
   │  └────────┘  │
   └──────────────┘

Hover any number to highlight that part on the page. Click to edit.

The Outline Trick

To visualize where every element starts and ends:

* { outline: 1px solid red; }

(Outline doesn’t affect layout, unlike border.) Easy to remove — just delete the rule. Great for figuring out “what’s that unexpected gap?”.

Backgrounds For Layout Debugging

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

A faint red tint on direct children of a layout container. Quickly shows which child is the wrong size.

Find The Computed Value

For something like “why is this 18px and not 16px?”, check the Computed panel — it shows the px value and links to the rule that won.

Layout Overlays

Chrome and Firefox both have Flexbox and Grid overlays in DevTools. Look for the flex / grid badges next to flex/grid containers in the Elements panel — click to overlay alignment guides directly on the page.

Force State

In DevTools, you can pin pseudo-states like :hover, :focus, :active — useful to inspect styles you can’t normally pin down. Look for the :hov button at the top of the Styles panel.

Up Next

The next chapter is CSS layout — starting with display.

Display →