DevTools Tips

Beyond inspecting elements — emulate users, audit performance, test accessibility, force CSS states.

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

What you'll learn

Use rendering emulation
Force pseudo-states
Run Lighthouse audits

DevTools has more than the Elements panel. A grab-bag of moves that save hours.

Force Element State

In the Styles panel, the :hov button lets you pin:

:hover
:focus
:active
:visited
:focus-visible
:focus-within

Useful when you can’t easily reproduce the state (a focused dropdown, an active button).

Edit Live, Even Pseudo-Elements

Click any value — even on ::before / ::after — and edit inline. Changes apply immediately. Great for tweaking values without round-tripping to the editor.

Rendering Emulation

In Chrome DevTools, the Rendering panel (More tools → Rendering) emulates:

prefers-color-scheme: dark
prefers-reduced-motion: reduce
prefers-contrast: more
forced-colors: active
Vision deficiencies (blurred, color-blind simulation)
Reduced data / slow CPU

Test all of those without changing OS settings.

Lighthouse

In DevTools → Lighthouse, run an audit. You get scores for:

Performance
Accessibility
Best Practices
SEO
PWA (optional)

The audits link directly to the offending elements. Excellent for spotting low-hanging fruit on a real page.

Coverage — Find Unused CSS

DevTools → More tools → Coverage. Reload the page. Shows what percentage of each CSS / JS file actually ran. Big unused chunks mean opportunities for code-splitting or removal.

Performance Panel — Frame-By-Frame

For “why is this animation janky?” — record a few seconds of interaction. The flame graph shows layout / paint / scripting costs. Look for long red bars (long tasks) or layout thrash (repeated yellow rectangles).

Layout Overlays

Open Elements. Look for badges next to the tag name:

flex — click to overlay flex alignment
grid — overlay grid lines and area names
scroll — see scroll containers
subgrid — for nested grids

These overlays make alignment debugging trivial.

Source Map → Original Source

When DevTools shows compiled CSS but you want to see your .scss or compiled-down original, source maps make it work. Enable in DevTools → Settings → Sources → “Enable CSS source maps”.

Up Next

CSS-only view transitions.

View Transitions →