Episode 1 — Fundamentals / 1.10 — CSS Architecture and Project Structure

1.10.e — Debugging CSS with DevTools

In one sentence: Browser DevTools let you inspect, edit, and diagnose every CSS rule applied to every element — mastering the Styles panel, box model view, and layout inspectors is the fastest path from "it looks wrong" to "I know exactly why."

Navigation: ← 1.10.d — Real-World Folder Structure · 1.10 Overview →

1. Opening DevTools

Action	Shortcut (Chrome / Edge)	Shortcut (Firefox)
Open DevTools	`Cmd+Opt+I` (Mac) / `Ctrl+Shift+I`	Same
Inspect specific element	`Cmd+Shift+C` / `Ctrl+Shift+C`	Same
Open console	`Cmd+Opt+J` / `Ctrl+Shift+J`	`Cmd+Opt+K` / `Ctrl+Shift+K`

Right-click any element → Inspect drops you straight into the Elements panel with that node selected.

2. The Elements panel → Styles tab

When you select an element, the Styles sidebar shows every CSS rule that targets it, listed from highest specificity at the top to lowest at the bottom:

element.style { }                  ← inline styles (highest)
.card--featured { … }              ← matching class rules
.card { … }                        ← base class
*, ::before, ::after { … }         ← universal / inherited
user agent stylesheet { … }        ← browser defaults (lowest)

Struck-through declarations are overridden by a higher-specificity rule. This is the fastest way to answer "why isn't my style applying?"

Quick edits

Click any value to edit it live.
Click the empty space below a rule to add a new declaration.
Toggle any declaration on/off with its checkbox.
Changes are not saved to disk (unless you set up Workspaces).

3. Computed tab

The Computed panel shows the final resolved value for every property on the selected element — after cascade, inheritance, and specificity battles.

Use it when:

You can't figure out where a value is coming from.
You want to see the actual pixel values after relative units are resolved.

Click the arrow next to any computed value to jump to the rule that set it.

4. Box model visualisation

The coloured box diagram in the Computed (or Styles) panel shows:

┌──────────────── margin ────────────────┐
│  ┌──────────── border ──────────────┐  │
│  │  ┌──────── padding ──────────┐   │  │
│  │  │                           │   │  │
│  │  │        content            │   │  │
│  │  │     (width × height)      │   │  │
│  │  │                           │   │  │
│  │  └───────────────────────────┘   │  │
│  └──────────────────────────────────┘  │
└────────────────────────────────────────┘

Hover over each zone to see it highlighted on the page. Click values to edit them live.

5. The quick-and-dirty overflow finder

When something scrolls horizontally or content pokes out and you can't tell which element is causing it:

* { outline: 1px solid red; }

Paste this in the Styles panel on the <html> element. Every box becomes visible instantly — the one extending beyond the viewport is your culprit.

More targeted version:

* { outline: 1px solid rgba(255, 0, 0, 0.3); }

Use outline (not border) because outline does not affect layout — it won't change box sizes and create new problems while debugging.

6. Forcing element states

Need to debug :hover, :focus, :active, or :visited styles?

Select the element in the Elements panel.
Click :hov in the Styles toolbar (or right-click → "Force state").
Check the pseudo-class you want to force.

The element stays in that state so you can inspect styles without holding your mouse perfectly still.

7. Flexbox & Grid inspectors

Flexbox

When a flex container is selected, Chrome/Firefox show a flex badge on the element tag. Click it to overlay:

Main axis and cross axis direction arrows.
Free space distribution between items.
Each item's flex-grow / flex-shrink / flex-basis resolved values.

Grid

Click the grid badge to overlay:

Track lines with numbered labels.
Grid areas highlighted by name.
Gap visualisation.

These visual tools are far faster than mentally computing grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)).

8. Layout shift debugging

Cumulative Layout Shift (CLS) is a Core Web Vital. To find shifts:

Open the Rendering tab (three-dot menu → More tools → Rendering).
Enable Layout Shift Regions — blue rectangles flash wherever the layout shifts.
Reload the page and watch which elements jump.

Common causes: images without width/height, late-loading fonts, injected ads or banners.

9. Performance panel for paint & layout costs

Open Performance → click Record → interact with the page → stop.
Look for green bars (paint) and purple bars (layout / reflow) in the timeline.
Large, frequent layout/paint blocks → performance problem.

Key indicators:

Forced reflow warnings (yellow triangles) — JS read layout, then wrote, then read again.
Long paint times on elements with box-shadow, filter, or clip-path.
Excessive layer promotion (too many composited layers wastes GPU memory).

10. Common CSS bugs and how to find them

Bug	Symptom	DevTools approach
Specificity override	Your rule exists but is struck-through	Styles panel → find the winning rule above yours
Wrong selector	Rule doesn't appear on the element at all	Check for typos; verify the class is actually on the element in the DOM
Collapsed margins	Two elements closer together than expected	Box model panel → check margins; `margin-top` and `margin-bottom` collapse between siblings
Unexpected inheritance	Text colour / font appears from nowhere	Computed panel → trace the inherited value to its source element
Overflow scroll	Horizontal scrollbar appears	`* { outline: 1px solid red }` → find the wide element
Z-index not working	Element behind another despite high `z-index`	Check that the element has `position` set; check stacking context parents
Flex item not shrinking	Content overflows flex container	Check `min-width: auto` (default) — set `min-width: 0` or `overflow: hidden`
Grid blowout	Column wider than expected	Check for `1fr` with long unbreakable content — use `minmax(0, 1fr)`

11. Key takeaways

Styles panel = your first stop. Struck-through rules show you specificity winners instantly.
Computed panel = the final truth after cascade, inheritance, and unit resolution.
Box model diagram = visual margin/padding/border inspector — hover to highlight.
* { outline: 1px solid red } finds overflow culprits without changing layout.
Force states (:hov) to inspect hover/focus styles without gymnastics.
Flex/Grid inspectors show axis, tracks, and space distribution visually.
Performance panel reveals expensive layout/paint operations in the timeline.

Explain-It Challenge

Explain without notes:

How do you find out which CSS rule is overriding your intended style on an element?
Why use outline instead of border when applying * { outline: 1px solid red } for debugging?
Describe how to use the Layout Shift Regions overlay to diagnose a CLS problem.

Navigation: ← 1.10.d — Real-World Folder Structure · 1.10 Overview →