Skip to main content

Chrome DevTools Shortcuts

This page is a complete keyboard shortcut reference for Chrome DevTools on macOS, covering all 28 shortcuts organized into 5 sections. Whether you’re new to Chrome DevTools or looking to master advanced features, this cheat sheet has every key combination you need — from basic editing and navigation to app-specific power-user actions.

Keyboard shortcuts are the fastest way to work in Chrome DevTools. Every time you use a shortcut instead of reaching for the mouse, you save a few seconds — and those seconds compound into hours over weeks and months. Start with the shortcuts you use most (copy, paste, undo, save), then gradually add app-specific ones as they become relevant to your workflow. Bookmark this page or download the PDF cheat sheet for quick reference.

Using keyboard shortcuts in Chrome DevTools reduces context switching between keyboard and mouse, helping you maintain focus and work more efficiently. Research shows that shortcut-driven workflows can save up to 8 working days per year compared to menu-driven navigation. On macOS, most Chrome DevTools shortcuts follow standard conventions — once you learn the modifier key patterns, new shortcuts become intuitive.

Tips for Learning Shortcuts

  • Practice one new Chrome DevTools shortcut each day. Muscle memory builds faster when you focus on a single combination at a time rather than trying to learn them all at once.
  • Print or bookmark this page for quick reference while working in Chrome DevTools. Having shortcuts visible nearby helps bridge the gap between looking them up and recalling them from memory.
  • Start with the shortcuts you use most. In Chrome DevTools, common actions like copy, paste, undo, and save are worth learning first since they apply across nearly every workflow.

Opening DevTools4

ActionShortcut
Open Dev ToolsI
Open ConsoleJ
Inspect ElementC
Toggle Dev ToolsF12

Panel Navigation7

ActionShortcut
Previous Panel[
Next Panel]
Toggle Dock PositionD
Toggle Device ModeM
Toggle Inspect ModeC
Open Command MenuP
Toggle DrawerEsc

Elements Panel7

ActionShortcut
Previous Element
Next Element
Collapse Node
Expand Node
Edit Attribute
Hide ElementH
Edit As HTMLF2

Debugger (Sources Panel)7

ActionShortcut
Pause ResumeF8
Step OverF10
Step IntoF11
Step OutF11
Toggle BreakpointB
Go To LineG
Open FileO

Frequently Asked Questions

Access Chrome DevTools shortcuts from your menu bar

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