Debugging CSS with Browser DevTools

CSS bugs are rarely about syntax. They are about a rule you cannot see, a value you did not expect, or a box that is bigger than you thought. DevTools shows you the browser's own calculation, so the question changes from "what did I write?" to "what did the browser actually compute?"

Open it with F12, or right-click an element and choose Inspect. The instructions here use Chrome terms. Firefox and Safari have equivalent panels with slightly different names, and Firefox's layout tooling is especially good.

The Elements panel and Styles pane#

Select an element in the DOM tree, and the Styles pane lists every rule that matches it, from the highest priority to the lowest.

element.style { }                       ← inline styles
.card:hover { box-shadow: ... }         ← matching rules, strongest first
.card { padding: 1rem;
        ~~margin: 0~~ ;                 ← strikethrough: overridden by another rule
        width: 300px;
        ⚠ colour: red; }                ← warning: invalid property or value
article { display: block }
user agent stylesheet
div { display: block }                  ← browser defaults, lowest priority

What to look for:

• A strikethrough means the declaration matched but lost. The winner is in a rule above it.
• A warning triangle means the property name or value is invalid.
• A rule is missing entirely. Your selector did not match, or the file did not load.
• You can click any value to edit it, use the arrow keys to change numbers, and check or uncheck declarations. Changes are live, instant and temporary, which makes DevTools the fastest way to experiment.

The Computed pane#

The Computed pane shows the final value of every property after the cascade. Use it to answer "what is this really?".

• Tick Show all to include defaults.
• Type in the filter box to find a property.
• Click the small arrow next to a value to jump to the exact rule that produced it.

This is how you find which of three conflicting rules is winning for font-size, or what 1.5em resolved to in pixels.

The box model diagram at the top shows content, padding, border and margin with real numbers. When a layout is a few pixels off, read it.

A method for "my CSS is not working"#

1. Select the element you expected to change. Right-click it in the page, not in your editor, to be sure it is the right one.
2. Look for your rule in Styles. If it is missing, check the selector for typos and the Network tab for your stylesheet's status. A 404 or a cached old copy is common.
3. Check for a warning icon. Fix the invalid value.
4. Check for a strikethrough. Find the rule that wins. Compare specificity, then order, then layers and !important.
5. Check the Computed value. If the declaration applied but the result looks wrong, the problem is the value, or a different property is involved.
6. Fix at the source, then reload and confirm.

Do not start editing the CSS before step 2, or you will add more rules to an already confusing stylesheet.

Forcing states#

You cannot hover and inspect at once, because the mouse is in DevTools. In the Styles pane, click :hov and tick :hover, :focus or :active to force them on the selected element. This is how you debug hover styles and transitions.

Layout tooling#

Flexbox and Grid badges. In the Elements panel, elements with display: flex or display: grid show a badge. Click it to draw an overlay on the page.

• For grid, the overlay draws the line numbers and names, which solves most off-by-one placement confusion.
• For flexbox, it shows free space and the item sizes, which helps with sizing and shrink problems.

The Layout pane lists all grid and flex containers on the page. The Styles pane also has small editor icons next to display: flex and justify-content that let you click through values with visual examples.

Hover inspection. Hovering over an element in the DOM tree highlights it on the page with colored layers: content, padding, border and margin. Use it to find where unexpected space comes from. Often it is an invisible margin on an element you forgot about.

Finding overflow and mystery space#

A horizontal scrollbar you did not expect is almost always one element that is too wide. Find it with a quick snippet in the Console:

[...document.querySelectorAll("*")].filter(
  el => el.getBoundingClientRect().right > document.documentElement.clientWidth
);

This lists every element whose right edge extends beyond the viewport. Often the culprit is a 100vw, a fixed width, or a long unbreakable word.

Another classic technique is temporarily outlining everything:

* { outline: 1px solid rgb(255 0 0 / 0.4) !important; }

Outlines do not affect layout, so you see every box's true bounds without changing the page.

The Rendering tab#

Open the command menu (Ctrl or Cmd plus Shift plus P) and type "Rendering". It offers emulation you cannot easily get otherwise:

• Emulate prefers-color-scheme, prefers-reduced-motion, forced-colors and prefers-contrast.
• Emulate print media, to preview your print stylesheet.
• Show layout shift regions, which flash blue where content moves unexpectedly.
• Paint flashing, which highlights areas being repainted. If your whole page flashes green on every hover, something is causing a broad repaint.
• Emulate vision deficiencies to check that information is not communicated by color alone.

Responsive testing#

The device toolbar (the phone and tablet icon) lets you resize the viewport and emulate phones, touch input and network speed. Drag the width handle slowly from small to large. The point is to find in-between widths where the layout breaks. Real devices still matter for touch behavior, scrolling and mobile browser UI like the address bar.

Animations and performance#

• The Animations panel records transitions and animations and lets you slow them down or scrub through them.
• The Performance panel records a trace. Look for long "Recalculate Style" and "Layout" blocks during an animation, which tell you that you are animating a layout property.
• The Coverage tab shows how much of your CSS is unused on the current page.
• The Changes tab lists every edit you made in DevTools, so you can copy them back into your source.

Edits in the Styles pane do not save to your files. Chrome's Workspaces feature can map them to local files. Otherwise copy the changes manually, and do it right away, since a refresh erases them.

Common mistakes#

• Debugging the wrong element, such as a wrapper instead of the visible one.
• Editing CSS blindly instead of reading the Styles pane.
• Assuming the browser loaded your latest CSS. Use "Disable cache" in the Network tab while DevTools is open.
• Not scrolling the Styles pane and missing rules lower down.
• Fixing symptoms with overflow: hidden when the real cause is one oversized element.
• Forgetting that DevTools edits disappear on reload.
• Testing responsive layout only at preset device sizes.

Practice#

1. Take any page you made and use :hov to inspect a hover style. Change a value live and copy the final version into your CSS.
2. Create a page with an element that causes horizontal overflow (use width: 100vw). Find it with the Console snippet and fix it.
3. Turn on Paint flashing, hover over a card with a box-shadow transition and another with a transform transition, and describe the difference.
4. Break your own page in three ways (a typo in a property, a specificity conflict, a wrong file path) and diagnose each with the method above.