Open DevTools Shortcut (F12 / ⌘⌥I)
Open developer tools: press F12 (or Ctrl+Shift+I) on Windows, ⌘⌥I on Mac. Works in Chrome, Edge and Firefox.
| Action | Mac | Windows | |
|---|---|---|---|
| Open DevTools | ⌘⌥I | F12 (or Ctrl+Shift+I) | |
| Open DevTools in element-picker mode | ⌘⇧C | Ctrl+Shift+C | |
| Open Console directly | ⌘⌥J | Ctrl+Shift+J | |
| Close DevTools | ⌘⌥I | F12 | |
| Toggle device toolbar (responsive) | ⌘⇧M | Ctrl+Shift+M |
The fastest way in
F12 on Windows (or Ctrl+Shift+I) and ⌘⌥I on Mac open the browser developer tools in whatever panel you last used. It is the same key in Chrome, Edge and Firefox, so you do not have to think about which browser you are in.
F12 vs Ctrl+Shift+I
They do the same thing — open DevTools. F12 is one key; Ctrl+Shift+I is handy on laptops where F12 needs the Fn key. On a Mac there is no F12 default, so use ⌘⌥I.
Jump to a specific panel
Skip the general shortcut when you know what you want: ⌘⇧C / Ctrl+Shift+C opens DevTools straight into the element picker, and ⌘⌥J / Ctrl+Shift+J drops you into the Console.
FAQ
What is the shortcut to open developer tools?
Press F12 (or Ctrl+Shift+I) on Windows and ⌘⌥I on Mac. The same keys work in Chrome, Edge and Firefox.
Why doesn't F12 work on my Mac?
Macs don't map F12 to DevTools by default — use ⌘⌥I instead. On some Mac keyboards F-keys also need the Fn key.
How do I open DevTools to a specific tab?
Use ⌘⇧C / Ctrl+Shift+C for the element inspector or ⌘⌥J / Ctrl+Shift+J for the Console to skip straight to that panel.