Chrome DevTools Keyboard Shortcuts
Two bindings carry most of the value here: the one that opens DevTools and the one that puts you straight into element inspection. The rest are about moving between panels without reaching for the mouse mid debug.
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 |
Source: Chrome DevTools keyboard shortcuts documentation. Bindings listed for Windows. The macOS bindings differ by more than a modifier swap; Chrome publishes both columns in its shortcut reference. The Chrome DevTools version these bindings were checked against is not established, so treat any binding that does not work as a version difference and check the vendor documentation linked above. 10 shortcuts.
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.