Chrome DevTools Shortcuts

Browsers·28 shortcuts·5 sections

Opening DevTools4

Open Dev Tools⌥⌘I
Open Console⌥⌘J
Inspect Element⌥⌘C
Toggle Dev ToolsF12

Panel Navigation7

Previous Panel⌘[
Next Panel⌘]
Toggle Dock Position⇧⌘D
Toggle Device Mode⇧⌘M
Toggle Inspect Mode⇧⌘C
Open Command Menu⇧⌘P
Toggle DrawerEsc

Elements Panel7

Previous Element↑
Next Element↓
Collapse Node←
Expand Node→
Edit Attribute↩
Hide ElementH
Edit As HTMLF2

Debugger (Sources Panel)7

Pause ResumeF8
Step OverF10
Step IntoF11
Step Out⇧F11
Toggle Breakpoint⌘B
Go To Line⌘G
Open File⌘O

Access Chrome DevTools shortcuts from your menu bar

KeyShortcut detects the active app and shows its shortcuts instantly. No memorization needed.

Open Dev Tools⌥⌘I
Open Console⌥⌘J
Inspect Element⌥⌘C