Browser DevTools Tricks Most People Skip

Most people's relationship with DevTools starts and ends at the Console tab and the occasional console.log. A few features tucked in the other tabs are worth the five minutes it takes to learn them.

Network throttling: test slow connections on purpose

The Network tab has a dropdown (usually labeled "No throttling") that lets you simulate Slow 3G or Fast 3G. It's the fastest way to catch a loading spinner that never appears, or a layout that breaks while waiting on a slow request — bugs that are invisible on your fast office connection.

Forcing element states

Right-click any element in the Elements/Inspector panel and look for "Force state" — it lets you pin :hover, :focus, or :active so you can actually inspect and tweak those styles instead of the state disappearing the moment your mouse moves.

Conditional breakpoints

Instead of a plain breakpoint that stops execution every single time a line runs, right-click the line number and add a condition — the code only pauses when that expression is true. Debugging a loop that fails on iteration #340 becomes instant instead of clicking "continue" 339 times.

// Right-click the line number, add condition:
i === 340

The Coverage tab: find dead code

Open the Command Menu (Ctrl/Cmd+Shift+P) and search "Coverage" — it highlights exactly which lines of your loaded CSS and JS actually ran, red for unused. It's a quick way to spot bloated stylesheets or scripts shipping far more than a page needs.