💬 Browser DevTools tricks that saved me hours of debugging

I wasted most of a Thursday last month on a form that would not submit, and the fix took ninety seconds. The API was returning a 422 the whole time. I never opened the Network tab, I just kept adding console logs and reloading like an idiot. So here are the DevTools things I now use every week, mostly learned the hard way. Network tab first, always. Reload, click the failed request, read the status code and the response body. Conditional breakpoints changed how I debug loops. Right click a line number in Sources, add something like index === 47, and it only pauses when that is true. No more pressing Continue fifty times to reach the one bad row. Preserve log, in both Console and Network. Without it everything clears on a redirect, which is exactly when you need it. The :hov button in Elements lets you lock a hover or focus state, so you can fix a dropdown style without the menu closing every time your mouse moves. The Application tab shows localStorage and cookies, and clearing them there is quicker than opening incognito for every single test. Last one is small. console.table on an array of objects gives you a proper table instead of nested arrows. What did I miss? Our team lead swears by something in the Performance tab but I have never opened it.

The one I'd add is the Network tab throttling option. Set it to a slow connection and reload. My page felt fine on office wifi, but on the slow setting a big image took forever.

Preserve log saved me hours on an OAuth redirect bug last year, console was clearing exactly when I needed it. Now I leave it on by default in anything I'm actively debugging, though it gets noisy fast if you forget it's on.

The form story is painfully familiar. My first month at work I fixed a broken login by adding console logs everywhere, while the Network tab sat right there showing a 401.