Open Developer Tools Shortcut (F12 / ⌘⌥I)
Open the browser developer tools: ⌘⌥I on Mac, F12 or Ctrl+Shift+I on Windows. Opens on the last-used panel.
| Action | Mac | Windows | |
|---|---|---|---|
| Open / toggle DevTools | ⌘⌥I | F12 or Ctrl+Shift+I | |
| Open DevTools on Console | ⌘⌥J | Ctrl+Shift+J | |
| Open DevTools in inspect mode | ⌘⇧C | Ctrl+Shift+C | |
| View page source | ⌘⌥U | Ctrl+U | |
| Close DevTools | ⌘⌥I (toggle) | F12 (toggle) |
Open the developer tools
⌘⌥I on the Mac, or F12 (also Ctrl+Shift+I) on Windows, opens the browser developer tools and drops you on whichever panel you used last. Press the same keys again to close the panel.
Works across browsers
These shortcuts behave the same in Chrome, Edge and Firefox. Safari first needs the Develop menu turned on (Settings → Advanced → “Show features for web developers”), after which ⌘⌥I opens the Web Inspector.
FAQ
What is the shortcut to open developer tools?
Press ⌘⌥I on the Mac or F12 (or Ctrl+Shift+I) on Windows. The same keys close the panel again.
Does F12 work on a Mac?
On most Mac keyboards F12 is a volume/media key, so use ⌘⌥I instead. If you have an external PC keyboard with a real F12, enable “Use F1, F2 as standard function keys” first.
How do I open DevTools in Safari?
Turn on the Develop menu under Settings → Advanced, then press ⌘⌥I to open the Web Inspector.