Turn on Web Inspector in Safari for web development

You want to right-click a page in Safari, choose Inspect Element, and dig into the DOM and console the way you would in Chrome — but the option isn't there. Safari's Web Inspector is switched off until you show the Develop menu. Flip that one checkbox and the full Inspector — Elements, Console, Network, and Sources — is a keystroke away.

Show the Develop menu first

Web Inspector rides along with the Develop menu, so enabling that is the whole prerequisite:

1. In Safari, open Safari → Settings (Cmd+,) and click Advanced.
2. Tick Show features for web developers on macOS 14 Sonoma and 15 Sequoia, or Show Develop menu in menu bar on macOS 13 Ventura and earlier.
3. Close settings. A Develop menu now sits in the menu bar, and Inspect Element appears in the right-click menu on every page.

Open the Inspector three ways

With the menu enabled, any of these opens Web Inspector on the current page:

• Right-click → Inspect Element — jumps straight to the node you clicked, highlighted in the Elements tab.
• Cmd+Opt+I — the fastest keyboard route once you're used to it.
• Develop → Show Web Inspector — the menu route, handy when you forget the shortcut.

The Inspector docks to the bottom or side of the window; drag the divider to resize it, or click the dock icon in its toolbar to pop it into its own window on a second monitor.

What each tab is for

The tabs across the top of the Inspector are where the actual work happens:

• Elements — the live DOM tree. Click any node to see its computed styles on the right, edit CSS values in place, and watch the page update instantly.
• Console — JavaScript errors, console.log output, and a prompt where you can run expressions against the page. This is usually where you look first when something silently fails.
• Network — every request the page makes, with status codes, sizes, and timing. Reload with it open to catch a 404 or a slow API call.
• Sources — the page's scripts, where you can set breakpoints and step through code.
• Storage — cookies, Local Storage, and session data for the site.

Prefer the Terminal

If you'd rather flip it without opening Safari's settings, the switch behind that checkbox is one command:

# Enable the Develop menu (and Web Inspector)
defaults write com.apple.Safari IncludeDevelopMenu -bool true

# Undo
defaults write com.apple.Safari IncludeDevelopMenu -bool false

Quit Safari and reopen it afterward. On modern macOS this write only sticks if Terminal has Full Disk Access in System Settings → Privacy & Security — so if nothing changes, use the Advanced-tab checkbox instead, which needs no special permission.

When the Inspector shows stale content

If Elements and Network keep showing an old version of the page, Safari is serving from cache. Use Develop → Empty Caches (Cmd+Opt+E) or clear it more thoroughly — see how to clear Safari website data on Mac.