Chrome DevTools shortcuts
- 28 shortcuts
- 5 sections
- Browsers
- Verified against official docs
Your answer helps keep this page right.
Do these shortcuts work for you?
Chrome DevTools shortcuts start with opening the tools: Open Dev Tools, Open Console and Inspect Element. Panel Navigation moves between panels and changes the layout. Elements Panel walks through the page structure with the arrow keys, and Debugger (Sources Panel) pauses and steps through code.
Start with these
- Open Dev Tools
- Open Console
- Inspect Element
- Open Command Menu
- Toggle Device Mode
- Search All Sources
Tips for Chrome DevTools
- Open Command Menu ⇧⌘P opens the Command Menu, where a command is found by name.
- In Search, Search All Sources ⌥⌘F uses the letter of Find In Panel ⌘F with one more modifier.
- No shortcut in Elements Panel uses a modifier. Hide Element H is a single letter and Edit As HTML F2 is a function key.
Opening DevTools4
| Action | Shortcut |
|---|---|
| Open Dev Tools | |
| Open Console | |
| Inspect Element | |
| Toggle Dev Tools |
Elements Panel7
| Action | Shortcut |
|---|---|
| Previous Element | |
| Next Element | |
| Collapse Node | |
| Expand Node | |
| Edit Attribute | |
| Hide Element | |
| Edit As HTML |
Debugger (Sources Panel)7
| Action | Shortcut |
|---|---|
| Pause Resume | |
| Step Over | |
| Step Into | |
| Step Out | |
| Toggle Breakpoint | |
| Go To Line | |
| Open File |
Search3
| Action | Shortcut |
|---|---|
| Find In Panel | |
| Search All Sources | |
| Clear Console |
Report a problem
GitHub is public. Email is private.
Related resources
More Browsers shortcuts
Explore more macOS apps
Frequently Asked Questions
How many keyboard shortcuts does Chrome DevTools have on macOS?
Chrome DevTools has 28 keyboard shortcuts on macOS, organized into 5 sections: Opening DevTools, Panel Navigation, Elements Panel, Debugger (Sources Panel), and more. This page lists all of them with searchable, organized shortcut tables.
Which Chrome DevTools shortcuts should I learn first?
Start with Open Dev Tools (⌥⌘I), Open Console (⌥⌘J), Inspect Element (⌥⌘C), Open Command Menu (⇧⌘P), Toggle Device Mode (⇧⌘M), Search All Sources (⌥⌘F). The sections on this page list the rest.
Can I download Chrome DevTools shortcuts as a PDF?
Yes. Click the download button at the top of this page to generate a printable PDF cheat sheet with all 28 Chrome DevTools shortcuts. The PDF includes organized sections, keycap-style key labels, and space for your own notes.
Where is the official Chrome DevTools keyboard shortcuts documentation?
The official Chrome DevTools keyboard shortcuts documentation is available on their website. Every shortcut on this page is sourced from and verified against the official documentation to ensure accuracy.
Do these Chrome DevTools shortcuts work on all Mac keyboards?
Yes. These shortcuts work on all Mac keyboards, including MacBook built-in keyboards and external Apple keyboards. The modifier keys are Command (⌘), Option (⌥), Control (⌃), and Shift (⇧). On keyboards without a Function row, some F-key shortcuts may require holding the Fn key.
Maintained by Vladik Didyk
Access Chrome DevTools shortcuts from your menu bar
KeyShortcut detects the active app and shows its shortcuts instantly. Switch it on in Settings. No memorization needed.