Chrome DevTools cookbook

Two different rules target the same button, and I can't tell which one the browser is actually using.

I need to see how a page looks in dark mode, but my laptop and my phone are both stuck in light mode.

I don't know exactly where my layout breaks, so I keep dragging the browser window narrower and guessing.

An image on my page just shows the little broken picture icon, and I don't know why.

The second I move my mouse to inspect a hover style, the hover state disappears and I'm back to guessing.

Every CSS tweak I make in DevTools disappears the moment I refresh the page.

My site feels instant on my office wifi, so I have no idea what it's like for someone on a weak signal.

Lighthouse flagged a bunch of accessibility issues on my page and I don't know where to start fixing them.

My stylesheet keeps growing every time I add a framework component, and I suspect most of it never even runs on my page.

A reference site uses a blue I like, and typing hex codes into a picker until it looks close is never quite right.

A red error shows up in the console and I can't tell if it's my own code or a script I added that's doing it.