Chrome DevTools: Secrets You Didn't Know

DevTools is an IDE inside your browser. Most devs use 10% of it.

1. Network Conditions (Throttling)

"It works on my wifi!" Test on "Slow 3G". Network Tab -> "No throttling" dropdown -> Select "Slow 3G". See how your loading skeletons behave.

2. $0, $1, $_

Click an element in "Elements" panel.
Console: type $0. It references that element!
$_: Reference the result of the last expression.

3. Coverage Tab (Unused JS/CSS)

Cmd+Shift+P -> Type "Coverage". Click Record. Reload page. It shows how much JS/CSS was loaded but NOT executed. Great for finding bloat.

4. Design Mode

Console: document.designMode = 'on' Now you can click and type anywhere on the page like a Word doc. Great for quick text edit prototyping.

5. CSS Flexbox/Grid Editor

In Elements style pane, click the tiny icon next to display: flex. A visual editor pops up to toggle justify-content, align-items. No more guessing!

6. Screenshots

Cmd+Shift+P -> "Capture full size screenshot". Takes a PNG of the entire page, even the scrolled parts.

7. Snippets

Sources Tab -> Snippets. Save JS code you run frequently (e.g., "Fill login form", "Clear cookies"). Run it on any page.

Mastering DevTools saves you one "recompile-reload" cycle every minute. That adds up to hours.