Skip to content

Chrome DevTools Shortcuts

5 categories · 39 shortcuts

01

Opening DevTools

4 shortcuts
  • Open DevToolsF12windows
  • Open DevToolsCtrl+Shift+Iwindows
  • Open ConsoleCtrl+Shift+Jwindows
  • Inspect ElementCtrl+Shift+Cwindows
02

Panel Navigation

5 shortcuts
  • Next panelCtrl+]windows
  • Previous panelCtrl+[windows
  • Toggle dock side (bottom/right)Ctrl+Shift+Dwindows
  • Toggle drawerEsc
  • Toggle device modeCtrl+Shift+Mwindows
03

Elements Panel

6 shortcuts
  • Navigate elementsUp/Down
  • Collapse/Expand elementLeft/Right
  • Edit attribute/textEnter
  • Hide elementH
  • Delete elementDelete
  • UndoCtrl+Zwindows
04

Sources & Debugging

7 shortcuts
  • Search filesCtrl+Pwindows
  • Go to lineCtrl+Gwindows
  • Step overF10windows
  • Step intoF11windows
  • Step outShift+F11windows
  • Continue / ResumeF8windows
  • Toggle breakpointCtrl+F8windows
05

Console

6 shortcuts
  • Clear consoleCtrl+Lwindows
  • Previous history entryUp
  • Next history entryDown
  • AutocompleteTab
  • ExecuteEnter
  • New line (multiline)Shift+Enter