Inspect Element Shortcut (Ctrl+Shift+C / ⌘⇧C)
Inspect an element: ⌘⇧C on Mac, Ctrl+Shift+C on Windows. Opens DevTools with the element picker already active.
| Action | Mac | Windows | |
|---|---|---|---|
| Inspect element (picker mode) | ⌘⇧C | Ctrl+Shift+C | |
| Open DevTools | ⌘⌥I | F12 | |
| Open Console | ⌘⌥J | Ctrl+Shift+J | |
| Toggle element picker (DevTools open) | ⌘⇧C | Ctrl+Shift+C | |
| Search the DOM tree | ⌘F (in Elements) | Ctrl+F (in Elements) |
Jump straight to an element
⌘⇧C (Mac) or Ctrl+Shift+C (Windows) opens the developer tools and immediately turns on the element picker, so the next thing you click on the page is highlighted in the Elements panel. It is the fastest way to answer “what is this, and why does it look like that?”
Already have DevTools open?
The same shortcut toggles the picker on and off while DevTools is focused. Hover over the page to see box-model overlays, then click to lock an element and read its HTML and CSS.
Related: open DevTools shortcut (F12 / ⌘⌥I) to open the panels, or open the JavaScript console (⌘⌥J / Ctrl+Shift+J) to jump straight to errors.
FAQ
What is the inspect element shortcut?
Press ⌘⇧C on the Mac or Ctrl+Shift+C on Windows. It opens DevTools with the element picker already active.
How is this different from F12?
F12 (⌘⌥I) just opens DevTools; Ctrl+Shift+C (⌘⇧C) opens it and switches on the point-and-click element picker in one step.
Does right-click work too?
Yes — right-click any element and choose Inspect. The keyboard shortcut is faster when you already know what you want to click.