There are two shortcuts, not one, and knowing the difference saves a click every time: Ctrl+Shift+I opens DevTools wherever you last left it, while Ctrl+Shift+C opens it directly in element-picker mode with your cursor ready to select something on the page.
On macOS both use Cmd+Option in place of Ctrl+Shift. That covers Chrome, Firefox and Edge, which have converged on the same bindings. Safari is the exception and needs a setting enabled first. Here are the specifics, plus the handful of other DevTools shortcuts that are actually worth committing to memory.
Table of contents
- The shortcuts by browser
- Why Ctrl+Shift+C sometimes does something else
- The shortcuts worth learning after these two
- How this fits the rest of the stack
- FAQ
The shortcuts by browser
Chrome, Edge, Firefox, Brave, Opera — same bindings across all of them.
- Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (macOS) — opens DevTools on the panel you last used.
- Ctrl+Shift+C (Windows/Linux) or Cmd+Option+C (macOS) — opens DevTools directly in element-picker mode. Click anything on the page and it is selected in the Elements panel.
- F12 — opens DevTools on Windows and Linux. Does nothing useful on most Macs without remapping.
- Ctrl+Shift+J / Cmd+Option+J — opens straight to the Console.
- Right-click then Inspect — always works and is the fallback when a shortcut is intercepted.
The C variant is the one worth building the habit around. If you are inspecting an element, you were always going to click it — this shortcut skips opening the panel and then activating the picker separately.
Safari requires a one-time setup. Safari then Settings then Advanced, and enable Show features for web developers (previously worded as Show Develop menu in menu bar). After that:
- Cmd+Option+I — opens Web Inspector.
- Cmd+Option+C — opens the Console.
- Right-click then Inspect Element also becomes available.
Note that Safari’s Cmd+Option+C opens the Console rather than the element picker, which is a genuine inconsistency with the other browsers and catches people who switch between them.
Why Ctrl+Shift+C sometimes does something else
This shortcut is contested. Several things want it, and which one wins depends on context.
- In a Linux terminal, Ctrl+Shift+C is copy — because plain Ctrl+C sends an interrupt signal. If you press it in a terminal expecting DevTools, you will copy instead.
- In some applications, it is bound to copy formatting or a similar clipboard action.
- In Firefox, this binding has moved between element-picker and other behaviours across versions, and older extensions sometimes claimed it. If it does not do what you expect, check Firefox’s DevTools settings.
- Some websites intercept it with their own key handlers, along with right-click, in a misguided attempt to prevent people viewing source.
That last one is worth addressing because it never works. The HTML has already been delivered to the browser — blocking a keyboard shortcut does not un-deliver it. You can still open DevTools from the browser menu (View then Developer in Chrome), use view-source: in the address bar, or disable JavaScript and reload. Sites that block right-click succeed only in irritating people.
If a shortcut is genuinely blocked, the menu route always works: the browser menu is outside the page’s control entirely.
The shortcuts worth learning after these two
Once DevTools is open, a handful of bindings do far more work than the rest.
- Ctrl+Shift+P / Cmd+Shift+P — the Command Menu. This is the highest-value shortcut in DevTools. Type what you want — screenshot, disable JavaScript, show coverage, switch theme — and it runs. It removes the need to remember where anything lives in the panels.
- Ctrl+P / Cmd+P — open a file by name in the Sources panel.
- Ctrl+F / Cmd+F — search within the current panel.
- Ctrl+Shift+F / Cmd+Option+F — search across every loaded file. Invaluable for finding which script sets a particular style or fires a particular request.
- Esc — toggle the drawer, giving you the Console alongside whatever panel you are in rather than switching away from it.
- Ctrl+Shift+M / Cmd+Shift+M — device toolbar, for responsive testing.
The Command Menu deserves the emphasis. Two genuinely useful things hidden behind it: Capture full size screenshot, which produces a full-page image including everything below the fold with no extension needed, and Capture node screenshot, which captures exactly one element.
In the Elements panel, arrow keys navigate the DOM tree — left and right collapse and expand, up and down move between nodes. Faster than clicking once you are used to it, and much more precise on a deeply nested tree.
One last trick with genuine utility: $0 in the Console refers to whatever element is currently selected in Elements. So select something with the picker, switch to Console, and $0.getBoundingClientRect() or getComputedStyle($0) gives you its measurements or styles directly. $1 through $4 are the previously selected elements.
How this fits the rest of the stack
Most of what DevTools reveals about a slow page — uncached assets, oversized images, blocking scripts — is fixed at the response-header and build level rather than in the markup. The RunxBuild hosting calculator shows what the resulting setup costs across the service, storage and bandwidth. RunxBuild static sites build from a repository with response headers, redirects and rewrites as configuration, so the caching policy you settle on in DevTools is the one that ships.
Useful related references:
- How to Disable JavaScript in Chrome, and Why You Should Do It on Purpose
- HTTP 304 Is Not an Error, and Seeing It Means Caching Works
- Error 431: Request Header Fields Too Large, and Why It Is Usually Cookies
- Response headers on RunxBuild
FAQ
What is the shortcut for Inspect Element?
Ctrl+Shift+C on Windows and Linux, or Cmd+Option+C on macOS, opens DevTools directly in element-picker mode. Ctrl+Shift+I or Cmd+Option+I opens DevTools on whichever panel you used last. F12 also opens DevTools on Windows and Linux.
Why does Ctrl+Shift+C not open the inspector?
It is a contested binding. In a Linux terminal it is copy, since plain Ctrl+C sends an interrupt. Some applications and extensions claim it, and some websites intercept it with their own handlers. The browser menu route — View then Developer — always works because it is outside the page’s control.
How do I inspect element in Safari?
Enable it first: Safari then Settings then Advanced, and turn on Show features for web developers. Then Cmd+Option+I opens Web Inspector. Note that Safari’s Cmd+Option+C opens the Console rather than the element picker, unlike other browsers.
Can websites block inspect element?
Not effectively. Sites can intercept keyboard shortcuts and right-click, but the HTML has already been delivered to your browser. The browser menu, view-source: in the address bar, and disabling JavaScript all still work. Blocking these only inconveniences visitors.
What is the most useful DevTools shortcut?
Ctrl+Shift+P or Cmd+Shift+P, which opens the Command Menu. Type what you want — capture full size screenshot, disable JavaScript, show coverage — and it runs, so you do not need to remember which panel anything lives in.