Skip to content
CtrlKFind a shortcut

Inspect Shortcut in Mac and Windows

AppsMac and WindowsChrome, Edge, SafariChecked 2 Nov 2026

Windows browsers

F12

Also on Windows

CtrlShiftI

Pick an element

CtrlShiftC

Mac

CommandOptionI

The inspect shortcut in Mac browsers is Command + Option + I, which opens the developer tools beside the page. Command + Option + C goes straight to element picking, so you can click any part of the page and see its code. On Windows, F12 or Ctrl + Shift + I does the same in Chrome, Edge and Firefox.

Safari on a Mac hides these tools until you turn them on once, explained below. Inspect is used by web designers, students learning HTML, and anyone checking why a page looks wrong. It is also handy for reading the exact size of an image or font on a site you like before recreating a similar layout.

Quick facts

  • Mac, Chrome and Firefox

    Command + Option + I

  • Mac, pick element

    Command + Option + C

  • Windows

    F12 or Ctrl + Shift + I

  • Windows, pick element

    Ctrl + Shift + C

  • Console

    Ctrl + Shift + J

  • Close tools

    Same keys again

Inspect shortcut in Mac and Windows browsers

Developer tools keys
BrowserWindowsMac
ChromeF12 or Ctrl + Shift + ICommand + Option + I
EdgeF12 or Ctrl + Shift + ICommand + Option + I
FirefoxF12 or Ctrl + Shift + ICommand + Option + I
SafariNot on WindowsCommand + Option + I after enabling
Pick an elementCtrl + Shift + CCommand + Option + C

Turn on inspect in Safari

  1. Open Safari and choose Settings from the Safari menu.
  2. Go to the Advanced tab.
  3. Tick Show features for web developers, or Show Develop menu in menu bar on older versions.
  4. Now Command + Option + I opens the Web Inspector.

You only need to do this once per Mac.

Inspect an element on the page

Right click any part of a web page and choose Inspect. The tools open with that element highlighted in the code. With the keyboard, press Ctrl + Shift + C on Windows or Command + Option + C on a Mac, then hover over the page; each part lights up, and clicking selects it.

Changes you make in the tools are only on your screen and vanish on reload. That makes it a safe place to test colours and text, but it never changes the real website.

Useful panels in the developer tools

Panels people use most
PanelUse
ElementsSee and try changes to HTML and CSS
ConsoleSee errors; Ctrl + Shift + J on Windows
NetworkCheck which files load and how fast
Device toolbarSee the page at phone width

The device toolbar opens with Ctrl + Shift + M in Chrome and Edge on Windows once the tools are open, which is handy for checking a site on mobile sizes.

When the inspect shortcut does not open

Problems and fixes
ProblemFix
Safari does nothingEnable web developer features in Safari settings
F12 changes volume on a laptopPress Fn + F12 or use Ctrl + Shift + I
Blocked on a work computerYour organisation can disable developer tools
Opens in a separate windowUse the three dot menu in the tools to dock it to the side
A web design student wonders why a heading is blue. She presses Command + Option + C on her MacBook, clicks the heading, and the style panel shows the colour rule, which she copies into her own project.

Frequently asked questions

What is the inspect shortcut on a Mac?
Command + Option + I, or Command + Option + C to pick an element.
What is the inspect element shortcut on Windows?
F12 or Ctrl + Shift + I.
What is the shortcut for inspect in Chrome?
Ctrl + Shift + I on Windows and Command + Option + I on Mac.
Why does inspect not work in Safari?

Developer features must be turned on in Safari settings first.

Do changes in inspect change the website?

No. They only affect your screen until you reload.

How do I open the console?
Ctrl + Shift + J in Chrome on Windows.