How do I open Chrome DevTools with a keyboard shortcut?

Press Cmd Option I on macOS or Ctrl Shift I on Windows and Linux to toggle DevTools. To open it directly in inspect-element mode, use Cmd Shift C or Ctrl Shift C, which lets you click an element to select it in the Elements panel.

What is the DevTools Command Menu?

The Command Menu, opened with Cmd Shift P or Ctrl Shift P, lets you run any DevTools action by typing its name. It is the quickest way to reach a feature when you do not remember the dedicated shortcut, similar to the command palette in a code editor.

How do I set a breakpoint from the keyboard?

In the Sources panel, place the cursor on a line and press Cmd B or Ctrl B to toggle a breakpoint. Use F8 to pause or resume, F10 to step over, F11 to step into, and Shift F11 to step out.

How do I clear the Console quickly?

With the Console focused, press Cmd K or Ctrl K to clear all logged output. You can also right-click and choose Clear console or call console.clear() from the prompt.

Why does a shortcut behave differently in my Chrome?

DevTools shortcuts can change between Chrome versions and some are remappable in settings. If a chord does not match, open the Command Menu and search for the action by name to see its current binding.

What is the Chrome DevTools Shortcuts?

Searchable Chrome DevTools shortcut reference covering the Elements, Console, Network, Sources and Performance panels plus global commands, with keys for both macOS and Windows. It runs free in your browser on Gera Tools, with nothing uploaded.

Chrome DevTools Shortcuts

Name: Chrome DevTools Shortcuts
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Chrome DevTools is far faster from the keyboard, but the shortcuts are spread across panels and differ between macOS and Windows. This reference gathers the documented defaults and renders each chord for your platform.

How the reference works

Each shortcut stores the action, its panel, and a key pattern with a Mod placeholder that renders as Cmd on macOS and Ctrl on Windows/Linux, plus matching Option/Alt. The search box matches the action, the panel name, and the rendered keys — so searching “breakpoint” narrows directly to all breakpoint-related shortcuts across panels. The panel selector reduces the list to one section.

Essential shortcuts to learn first

If you use DevTools regularly, these six get you the most leverage:

Action	macOS	Windows
Open DevTools	Cmd Option I	Ctrl Shift I
Inspect element	Cmd Shift C	Ctrl Shift C
Command Menu (run any action by name)	Cmd Shift P	Ctrl Shift P
Quick Open (fuzzy file search)	Cmd P	Ctrl P
Toggle device toolbar (responsive mode)	Cmd Shift M	Ctrl Shift M
Clear Console	Cmd K	Ctrl K

The Command Menu (Cmd/Ctrl + Shift + P) deserves special mention: it is a command palette that runs any DevTools action by typing its name. When you forget a shortcut, open the Command Menu and type what you want to do — it is faster than consulting any reference table and shows the live binding for your version.

Debugger shortcuts (Sources panel)

Step debugging is the workflow where keyboard shortcuts matter most, because clicking through a debugger is painfully slow:

Action	Key
Pause / Resume	F8
Step over (next line, no entering functions)	F10
Step into (enter the called function)	F11
Step out (finish current function, return to caller)	Shift F11
Toggle breakpoint on current line	Cmd B / Ctrl B

Elements panel tips

In the Styles pane, arrow keys increment or decrement a selected numeric CSS value by 1. Hold Shift for steps of 10, Cmd/Ctrl for 100, or Alt/Option for 0.1 — useful for tweaking pixel values or opacity without leaving the keyboard.

H while a node is selected in the Elements tree toggles visibility: hidden on that element, letting you temporarily hide parts of the page to inspect what is beneath.

Network panel shortcuts

Cmd/Ctrl + Shift + E or the “preserve log” checkbox keeps the network log across page navigations — essential when debugging redirects. The filter bar at the top of the Network panel accepts resource-type filters like type:fetch or domain:api.example.com to reduce noise on busy pages.

Because bindings can shift between Chrome releases and some are user-remappable, treat the Command Menu as the source of truth when a chord does not respond as expected.