Chrome DevTools keyboard shortcuts

Chrome DevTools is the debugging and profiling toolkit built into Google Chrome, covering the DOM, CSS, JavaScript, network and performance. Web developers open it hundreds of times a week, so knowing the keyboard paths into each panel and through the debugger saves real time every single day. This cheat sheet covers 50 default shortcuts for Windows and Mac.

Opening DevTools

Open DevTools (last used panel)	`F12Cmd`+`Option`+`I`
Open DevTools (Elements-style inspect)	`Ctrl`+`Shift`+`ICmd`+`Option`+`I`
Open DevTools on the Console panel	`Ctrl`+`Shift`+`JCmd`+`Option`+`J`
Toggle inspect element mode	`Ctrl`+`Shift`+`CCmd`+`Shift`+`C`

Global (inside DevTools)

Run command menu	`Ctrl`+`Shift`+`PCmd`+`Shift`+`P`
Open a file	`Ctrl`+`PCmd`+`P`
Search across all loaded sources	`Ctrl`+`Shift`+`FCmd`+`Option`+`F`
Search within current panel	`Ctrl`+`FCmd`+`F`
Open Settings	`F1Fn`+`F1`
Next panel	`Ctrl`+`]Cmd`+`]`
Previous panel	`Ctrl`+`[Cmd`+`[`
Toggle dock position (last used)	`Ctrl`+`Shift`+`DCmd`+`Shift`+`D`
Toggle drawer (console at bottom)	`EscEsc`
Toggle device (responsive) toolbar	`Ctrl`+`Shift`+`MCmd`+`Shift`+`M`
Zoom DevTools in	`Ctrl`+`=Cmd`+`=`
Zoom DevTools out	`Ctrl`+`-Cmd`+`-`
Reset DevTools zoom	`Ctrl`+`0Cmd`+`0`
Reload page	`F5Cmd`+`R`
Hard reload (ignore cache)	`Ctrl`+`Shift`+`RCmd`+`Shift`+`R`

Console

Clear console	`Ctrl`+`LCmd`+`K`
Run expression	`EnterEnter`
New line without running (multi-line entry)	`Shift`+`EnterShift`+`Enter`
Previous command from history	`UpUp`
Accept autocomplete suggestion	`TabTab`

Elements Panel

Undo change	`Ctrl`+`ZCmd`+`Z`
Redo change	`Ctrl`+`YCmd`+`Shift`+`Z`
Hide selected element	`HH`
Edit selected element as HTML	`F2Fn`+`F2`
Delete selected element	`DeleteDelete`
Select next / previous element	`Down / UpDown / Up`
Expand / collapse selected node	`Right / LeftRight / Left`
Expand node and all children recursively	`Ctrl`+`Alt`+`Click arrowOption`+`Click arrow`
Cycle color format (hex, RGB, HSL)	`Shift`+`Click color swatchShift`+`Click color swatch`

Styles Pane (CSS values)

Increment / decrement value by 1	`Up / DownUp / Down`
Increment / decrement value by 0.1	`Alt`+`Up / Alt`+`DownOption`+`Up / Option`+`Down`
Increment / decrement value by 10	`Shift`+`Up / Shift`+`DownShift`+`Up / Shift`+`Down`
Increment / decrement value by 100	`Ctrl`+`Up / Ctrl`+`DownCmd`+`Up / Cmd`+`Down`

Sources & Debugger

Pause / resume script execution	`F8F8`
Step over next function call	`F10F10`
Step into next function call	`F11F11`
Step out of current function	`Shift`+`F11Shift`+`F11`
Toggle breakpoint on current line	`Ctrl`+`BCmd`+`B`
Deactivate all breakpoints	`Ctrl`+`F8Cmd`+`F8`
Go to member (function in file)	`Ctrl`+`Shift`+`OCmd`+`Shift`+`O`
Save edits to file	`Ctrl`+`SCmd`+`S`
Toggle line comment	`Ctrl`+`/Cmd`+`/`
Select next occurrence of current word	`Ctrl`+`DCmd`+`D`
Run snippet	`Ctrl`+`EnterCmd`+`Enter`

Network & Performance

Start / stop recording (Network or Performance)	`Ctrl`+`ECmd`+`E`
Record performance profile of page load	`Ctrl`+`Shift`+`ECmd`+`Shift`+`E`

Put your top Chrome DevTools shortcuts on real keys

The five Chrome DevTools actions most worth binding to a physical macropad key:

Ctrl+Shift+CCmd+Shift+C Toggle inspect element mode The fastest path from seeing a bug on the page to the DOM node that causes it.

Ctrl+Shift+PCmd+Shift+P Run command menu One key unlocks every DevTools feature, including ones with no shortcut at all.

F8F8 Pause / resume script execution The heartbeat of every JavaScript debugging session, pressed constantly.

Ctrl+Shift+RCmd+Shift+R Hard reload (ignore cache) Kills stale-cache confusion instantly when testing front-end changes.

Ctrl+Shift+MCmd+Shift+M Toggle device toolbar Responsive checks happen on every UI change; one key flips to mobile view.

I hand-build small-batch programmable macropads (QMK/VIA) in Barcelona. One press, any shortcut, any app.

See the macropads

Chrome DevTools shortcut FAQs

How do I open Chrome DevTools with the keyboard?

Press F12 or Ctrl+Shift+I on Windows, or Cmd+Option+I on Mac. Use Ctrl+Shift+J (Cmd+Option+J) to land directly on the Console, or Ctrl+Shift+C (Cmd+Shift+C) to start in inspect-element mode.

Is there a command palette in Chrome DevTools?

Yes. Press Ctrl+Shift+P (Cmd+Shift+P on Mac) to open the Command Menu, which can run any DevTools action such as capturing screenshots, toggling themes or disabling JavaScript.

What are the debugger stepping shortcuts in DevTools?

F8 pauses or resumes execution, F10 steps over a call, F11 steps into it and Shift+F11 steps out. Ctrl+B (Cmd+B) toggles a breakpoint on the current line in the Sources panel.

How do I search all files in Chrome DevTools?

Press Ctrl+Shift+F on Windows or Cmd+Option+F on Mac to search across every loaded source file. Use Ctrl+P (Cmd+P) to open a specific file by name.

How do I clear the DevTools console quickly?

Press Ctrl+L (or Cmd+K on Mac) while focused on the Console, or run clear() in the console itself.