Chrome DevTools Keyboard Shortcuts
Master Chrome DevTools with essential keyboard shortcuts for debugging, inspecting, network analysis, and console. Mac and Windows included.
Why Learn Chrome DevTools Shortcuts?
Chrome DevTools is the primary debugging tool for web developers. Whether you are inspecting DOM elements, debugging JavaScript, profiling performance, or analyzing network requests, DevTools has a shortcut for it. Using keyboard shortcuts instead of clicking through menus can cut your debugging time dramatically.
This guide covers the most useful Chrome DevTools shortcuts for both Mac and Windows/Linux.
---
Opening DevTools
| Action | Mac | Windows / Linux |
|---|---|---|
| Open DevTools (last panel) | Cmd + Option + I | F12 or Ctrl + Shift + I |
| Open Elements panel | Cmd + Option + C | Ctrl + Shift + C |
| Open Console panel | Cmd + Option + J | Ctrl + Shift + J |
| Open Command Menu | Cmd + Shift + P | Ctrl + Shift + P |
| Toggle DevTools dock position | Cmd + Shift + D | Ctrl + Shift + D |
| Open Settings | F1 (when DevTools focused) | F1 (when DevTools focused) |
---
Elements Panel
The Elements panel is where you inspect and modify the DOM and CSS.
| Action | Mac | Windows / Linux |
|---|---|---|
| Inspect element mode | Cmd + Shift + C | Ctrl + Shift + C |
| Toggle element state (:hover, etc.) | Click :hov in Styles | Click :hov in Styles |
| Edit as HTML | F2 on selected element | F2 on selected element |
| Navigate DOM up/down | Up / Down arrows | Up / Down arrows |
| Expand/collapse node | Right / Left arrows | Right / Left arrows |
| Expand all children | Option + Click arrow | Alt + Click arrow |
| Hide element | H | H |
| Delete element | Delete or Backspace | Delete or Backspace |
| Edit attribute | Enter on selected attribute | Enter on selected attribute |
| Next/previous attribute | Tab / Shift + Tab | Tab / Shift + Tab |
Styles Pane Tips
- Click a CSS value and use Up/Down to increment/decrement by 1.
- Hold Shift + Up/Down to change by 10.
- Hold Option/Alt + Up/Down to change by 0.1.
- Hold Cmd/Ctrl + Up/Down to change by 100.
---
Console Panel
| Action | Mac | Windows / Linux |
|---|---|---|
| Focus console | Cmd + Option + J | Ctrl + Shift + J |
| Clear console | Cmd + K | Ctrl + L |
| Multi-line entry | Shift + Enter | Shift + Enter |
| Execute expression | Enter | Enter |
| Previous command | Up Arrow | Up Arrow |
| Next command | Down Arrow | Down Arrow |
| Toggle console drawer | Esc | Esc |
Useful Console Shortcuts
$0— Reference the currently selected element in Elements panel.$_— Reference the result of the last evaluated expression.$('selector')— Shorthand fordocument.querySelector().$$('selector')— Shorthand fordocument.querySelectorAll().copy(object)— Copy any object to clipboard as a string.monitor(fn)— Log when a function is called.
---
Sources Panel (Debugging)
| Action | Mac | Windows / Linux |
|---|---|---|
| Open file | Cmd + P | Ctrl + P |
| Go to line | Cmd + G or Ctrl + G | Ctrl + G |
| Find in file | Cmd + F | Ctrl + F |
| Search across all files | Cmd + Option + F | Ctrl + Shift + F |
| Toggle breakpoint | Cmd + B | Ctrl + B |
| Pause/Resume | F8 or Cmd + \ | F8 or Ctrl + \ |
| Step over | F10 or Cmd + ' | F10 |
| Step into | F11 or Cmd + ; | F11 |
| Step out | Shift + F11 or Cmd + Shift + ; | Shift + F11 |
| Deactivate breakpoints | Cmd + F8 | Ctrl + F8 |
| Run snippet | Cmd + Enter | Ctrl + Enter |
| Toggle all breakpoints | via Breakpoints pane | via Breakpoints pane |
---
Network Panel
| Action | Mac | Windows / Linux |
|---|---|---|
| Start/Stop recording | Cmd + E | Ctrl + E |
| Clear network log | Cmd + K | Ctrl + L |
| Search requests | Cmd + F | Ctrl + F |
| Toggle filter bar | Cmd + F | Ctrl + F |
| Copy as cURL | Right-click > Copy > Copy as cURL | Same |
| Replay XHR | Right-click > Replay XHR | Same |
Filtering Tips
Use the filter bar to quickly narrow down requests:
is:running— Show in-progress requestslarger-than:100k— Show requests larger than 100KBmethod:POST— Show only POST requestsstatus-code:404— Show only 404 responsesdomain:api.example.com— Filter by domain-domain:cdn.example.com— Exclude a domain
---
Performance Panel
| Action | Mac | Windows / Linux |
|---|---|---|
| Start/Stop recording | Cmd + E | Ctrl + E |
| Record and reload | Cmd + Shift + E | Ctrl + Shift + E |
| Zoom into timeline | Scroll up/down or W/S | Scroll up/down or W/S |
| Pan timeline | A/D | A/D |
---
Application Panel
No dedicated shortcuts, but useful quick actions:
- Clear Storage: Application > Storage > Clear site data
- View Cookies: Application > Cookies
- Inspect Service Workers: Application > Service Workers
- Local/Session Storage: Application > Local Storage / Session Storage
---
General DevTools Navigation
| Action | Mac | Windows / Linux |
|---|---|---|
| Switch panels | Cmd + [ / Cmd + ] | Ctrl + [ / Ctrl + ] |
| Toggle console drawer | Esc | Esc |
| Search across panels | Cmd + Shift + F | Ctrl + Shift + F |
| DevTools Command Menu | Cmd + Shift + P | Ctrl + Shift + P |
| Increase font size | Cmd + + | Ctrl + + |
| Decrease font size | Cmd + - | Ctrl + - |
| Reset font size | Cmd + 0 | Ctrl + 0 |
---
Chrome Shortcuts (Browser Level)
These are not DevTools shortcuts, but they complement your debugging workflow:
| Action | Mac | Windows / Linux |
|---|---|---|
| Hard reload (no cache) | Cmd + Shift + R | Ctrl + Shift + R |
| View page source | Cmd + Option + U | Ctrl + U |
| Clear browsing data | Cmd + Shift + Delete | Ctrl + Shift + Delete |
| Toggle bookmark bar | Cmd + Shift + B | Ctrl + Shift + B |
| Open new incognito window | Cmd + Shift + N | Ctrl + Shift + N |
| Task Manager | Window menu > Task Manager | Shift + Esc |
---
Top 10 DevTools Shortcuts to Memorize
- Cmd/Ctrl + Option/Shift + I — Open DevTools.
- Cmd/Ctrl + Shift + C — Inspect element mode.
- Cmd/Ctrl + Shift + P — Command Menu (the DevTools equivalent of a command palette).
- Cmd/Ctrl + P — Open file in Sources panel.
- Cmd/Ctrl + Shift + F — Search across all source files.
- F8 — Pause/Resume script execution.
- F10 — Step over during debugging.
- Esc — Toggle the console drawer from any panel.
- Cmd/Ctrl + K — Clear the console.
- Cmd/Ctrl + Shift + R — Hard reload the page without cache.
---
Practice Makes Perfect
The most efficient way to internalize these shortcuts is through consistent practice. Consider using Keyhab, a spaced-repetition shortcut trainer, to drill DevTools shortcuts until they become automatic. Even 5 minutes of daily practice can make a noticeable difference in your debugging speed within a couple of weeks.
---
Conclusion
Chrome DevTools is an incredibly powerful toolkit, and keyboard shortcuts are the fastest way to navigate it. Start with the top 10 list, then progressively learn panel-specific shortcuts as you work. Your future self — and your debugging sessions — will thank you.