Chrome DevTools Keyboard Shortcuts — Free Printable Reference
62 Chrome DevTools shortcuts on one page, Windows/Linux and Mac keys side by side — panels, Console, Elements and Styles, Network and the Sources debugger. Hit Print or Download PDF for the whole sheet, no signup. For the editor half of the job, see the VS Code shortcuts cheat sheet.
Prints on one US Letter page. Set margins to "None" for the sharpest result.
Chrome DevTools Keyboard Shortcuts
Default bindings · Mac: ⌘ Command ⌥ Option ⌃ Control ⇧ Shift · Windows and Linux keys are identical
Bold Mac keys use ⌃ Control, not ⌘ Command · same keys in Edge, Brave and other Chromium browsers · printablepolly.com/chrome-devtools-shortcuts
How to Use This DevTools Cheat Sheet
1. Three keys open the panel you actually want
Ctrl+Shift+I (⌘⌥I) reopens the last panel, Ctrl+Shift+J (⌘⌥J) lands in the Console prompt, and Ctrl+Shift+C (⌘⇧C) opens Elements with Inspect mode already on, so the next click picks the node. After that the Command Menu — Ctrl+Shift+P (⌘⇧P) — reaches everything else by name, including the drawer tabs that never got a shortcut.
2. Hand the selected element to the Console
Inspect a node, then press Esc to pull the Console up over the Elements panel without leaving it. In the prompt, $0 is that selected element (and $1 the one before it), $_ is the last result, and $$(".card") returns a real array from a selector. That loop — click, Esc, $0 — is most of day-to-day DevTools work.
3. Type your Network filters instead of clicking them
The Network panel is short on shortcuts because its power is in the filter box: Ctrl+F (⌘F) searches inside headers and response bodies, while the filter field takes status-code:404, larger-than:1M, method:POST and domain:*.example.com — prefix any of them with - to invert it. Ctrl+E (⌘E) stops recording once you have the requests you came for.
4. The debugger keys are the ones you already know
F8 to resume, F10 to step over, F11 to step in and Shift+F11 to step out are the same keys VS Code uses, so the VS Code shortcuts sheet and this one reinforce each other. Pin this next to the HTML & CSS reference when you are living in the Styles pane, and the general keyboard shortcuts sheet for the browser and OS keys around DevTools.
Printable PDF
The sheet above is the whole thing — one US Letter page, black-and-white friendly, with all 62 shortcuts for Windows/Linux and Mac. Print as many copies as you need for a team or a classroom. No signup, no watermark.
More Printable Tech Cheat Sheets
VS Code Shortcuts
Windows, Mac & Linux keybindings
⌨️Keyboard Shortcuts
Browser & OS keys, Mac and Windows
🌐HTML & CSS Reference
Tags, selectors, flexbox & grid
🔍Regex Cheat Sheet
Patterns for the Search tab
🔀Git Cheat Sheet
Common git commands & workflows
⌘Mac Keyboard Shortcuts
macOS keys outside the browser
FAQ
How do I open Chrome DevTools with the keyboard?
F12 or Ctrl+Shift+I on Windows and Linux, ⌘⌥I on a Mac, opens whichever panel you used last. Two keys open a specific panel instead: Ctrl+Shift+J (⌘⌥J) drops you into the Console with the cursor already in the prompt, and Ctrl+Shift+C (⌘⇧C) opens Elements with Inspect mode armed, so your next click selects a node. Learning those two saves a panel click every time.
What is the Command Menu, and why is it the one to memorize?
Ctrl+Shift+P (⌘⇧P) opens a fuzzy search over every DevTools command — "screenshot", "coverage", "disable JavaScript", "show rendering" — including the panels and drawer tabs that have no shortcut at all. It also does double duty as the file opener: Ctrl+P lists loaded files, and typing a prefix switches modes — ">" for commands, ":" for a line number, "@" for a function or CSS rule, "!" to run a saved snippet.
Why do a few Mac shortcuts use Control instead of Command?
Because DevTools ships them that way. 5 of the bindings on this sheet are ⌃ Control on a Mac: ⌃` focuses the Console, ⌃G goes to a line, ⌃M jumps to the matching bracket, and ⌃. / ⌃, walk down and up the call stack while paused (⌃P / ⌃N also move through Console suggestions). They are bolded on the sheet so you do not reach for ⌘ first and trigger a macOS shortcut instead.
Do these shortcuts work in Edge, Brave and other Chromium browsers?
Yes. Edge, Brave, Opera, Vivaldi and Arc all ship the same Chromium DevTools front end, so the panels and the keys match — Edge renames a couple of drawer tabs but keeps the bindings. Firefox and Safari have their own developer tools with a different key set, so this sheet does not apply there.
How do I clear the Console?
Ctrl+L on Windows and Linux; on a Mac either ⌘K or ⌥L. Running clear() in the prompt does the same thing, and so does the ⃠ button at the top-left of the Console. If the log keeps emptying itself on navigation, that is the default — turn on "Preserve log" in Console settings to keep messages across page loads.
Is this DevTools cheat sheet free to print?
Yes — click Print or Download PDF and you get all 62 shortcuts on one US Letter page, with the Windows/Linux and Mac keys side by side. No signup, no watermark, and no limit on copies for your team, bootcamp or classroom.