Opening DevTools
| Shortcut | Description |
|---|---|
| F12 | Open/close DevTools |
| Ctrl+Shift+I | Open DevTools (alternate) |
| Ctrl+Shift+C | Open Inspector / Inspect Element |
| Ctrl+Shift+J | Open DevTools to Console tab |
| Ctrl+[ | Move to previous panel |
| Ctrl+] | Move to next panel |
| Ctrl+Shift+D | Toggle dock position |
| Esc | Show/hide Console drawer |
Elements Panel
| Shortcut | Description |
|---|---|
| H | Toggle visibility of selected element |
| Delete | Delete selected element |
| Ctrl+Z | Undo DOM change |
| F2 | Edit element as HTML |
| Ctrl+F | Search in Elements panel |
| ↑/↓ | Navigate to previous/next element |
| ←/→ | Collapse/expand element |
| Double-click attribute | Edit attribute inline |
Console Tricks
| Command / Key | Effect |
|---|---|
| $("selector") | Query selector shorthand (like document.querySelector) |
| $$("selector") | Query selector all (returns array) |
| $0 | Last inspected element |
| $1, $2, $3, $4 | Previously inspected elements |
| $_ | Last evaluated expression result |
| copy(value) | Copy value to clipboard |
| dir(object) | Display object properties |
| clear() | Clear the console |
| Ctrl+L | Clear console (keyboard) |
| Shift+Enter | New line in console without executing |
| ↑ / ↓ | Navigate command history |
| console.table(data) | Display array/object as table |
| console.time() / timeEnd() | Measure code execution time |
Network & Performance
| Action | Result |
|---|---|
| Ctrl+Shift+R | Hard reload (bypass cache) |
| Ctrl+F5 | Force reload and clear cache |
| Right-click request → Copy as cURL | Copy network request as cURL command |
| Filter bar: XHR | Show only AJAX/fetch requests |
| Filter bar: status-code:404 | Show only 404 errors |
| Throttle dropdown | Simulate slow network (Fast 3G, Slow 3G) |
| Coverage tab | Find unused CSS and JS |
| Lighthouse tab | Run performance / SEO / a11y audit |
Hidden Gems
| Trick | What It Does |
|---|---|
| Ctrl+Shift+P then "screenshot" | Capture full-page screenshot |
| 3-dot menu → More tools → Rendering | Emulate print media, dark mode, etc. |
| CSS Overview panel | Audit all colors, fonts, unused declarations |
| Ctrl+Shift+P → "Sensors" | Spoof GPS location and device orientation |
| Ctrl+Shift+P → "FPS" | Show real-time frames-per-second meter |
| Device toolbar → Edit → Add device | Add custom device dimensions |