Chrome DevTools Keyboard Shortcuts
Speed up debugging in the browser with the Chrome DevTools shortcuts that open panels, inspect elements, and control the console. Bindings assume a default keyboard layout.
10 shortcuts across 3 groups
| Keys | Action |
|---|---|
| F12 | Open or close DevTools |
| Ctrl + Shift + I | Open DevTools |
| Ctrl + Shift + C | Inspect an element on the page |
| Ctrl + Shift + J | Open the console panel |
| Keys | Action |
|---|---|
| Ctrl + L | Clear the console |
| Up / Down | Cycle through command history |
| Shift + Enter | Add a new line without running |
| Keys | Action |
|---|---|
| Ctrl + [ | Move to the previous panel |
| Ctrl + ] | Move to the next panel |
| Ctrl + F | Search within the current panel |
Getting these into muscle memory
A cheat sheet only helps if the bindings move from the page into your hands. The fastest way is to pick two or three shortcuts from a single group above, force yourself to use them for a few days even when the mouse feels quicker, and only then add more. Trying to memorize an entire sheet at once rarely sticks, because none of the bindings get enough repetition to become automatic.
The groups here are ordered by how often you reach for them. Openers and palettes come first because they unlock everything else, then editing and navigation, which is where most of a session is spent. Keep this page open in a tab while you learn, and it will quietly work its way out of your sight and into your fingers.