Safari Developer Tools: How to Use Web Inspector to Debug Websites

Yes, Safari has developer tools: they're called Web Inspector, and they're built into Safari on the Mac but hidden by default. To open them, choose Safari > Settings > Advanced, check Show features for web developers, then press Option+Cmd+I on any page (WebKit). The same Mac tools also debug Safari on iPhone, iPad and the iOS Simulator.

How to open developer tools in Safari (Mac)

1. Open Safari and choose Safari > Settings (Cmd+,).
2. Click the Advanced tab.
3. Check Show features for web developers at the bottom. A Develop menu appears in the menu bar.
4. Open the page you want to debug and press Option+Cmd+I, or choose Develop > Show Web Inspector. You can also right-click any element and choose Inspect Element.

Older guides tell you to check "Show Develop menu in menu bar". That label was renamed to "Show features for web developers" in Safari 17; the steps are otherwise the same.

Safari developer tools shortcuts

Action	Shortcut
Show Web Inspector	Option+Cmd+I
Show JavaScript Console	Option+Cmd+C
Enter Responsive Design Mode	Option+Cmd+R
Show Page Source	Option+Cmd+U

The Web Inspector tabs

Web Inspector is split into tabs. You can show or hide tabs by right-clicking the tab bar. WebKit documents each one at webkit.org/web-inspector.

• Elements: the live DOM and CSS. Edit styles, toggle classes, force :hover and other states, inspect the box model, and see Flexbox and Grid overlays (Elements tab).
• Console: the Safari developer console. Logs, errors, and a JavaScript prompt that runs in the page. $0 is the element selected in Elements (Console API).
• Sources: the Safari debugger. Set breakpoints (line, event, DOM mutation, fetch/XHR, exception), step through code, and use source maps (Sources tab).
• Network: every request with headers, timing, size, and response body. It has a toggle to disable caches while Web Inspector is open (Network tab). To replace a response with your own file, create a Local Override from the Sources tab.
• Timelines: record page activity to profile layout, rendering, JavaScript, memory, and energy impact (Timelines tab).
• Storage: cookies, Local and Session Storage, IndexedDB, and Cache Storage.
• Graphics: canvas contexts, WebGL, and CSS/Web animations.
• Layers: a 3D view of compositing layers and why each one was created (Layers tab).
• Audit: run built-in or custom checks, such as accessibility audits, against the page (Audit tab).

Debugging JavaScript in Safari

A typical Safari debugging session:

1. Open Sources and find your file in the left sidebar (bundled code maps back to originals if your build emits source maps).
2. Click a line number to add a breakpoint, or add debugger; to your code.
3. Trigger the code. Execution pauses; inspect variables in the right sidebar and the call stack.
4. Use the step buttons, or type expressions in the Console while paused. They run in the paused scope.

To stop on any thrown error, enable All Exceptions or Uncaught Exceptions in the Breakpoints section.

Safari mobile view: Responsive Design Mode

Choose Develop > Enter Responsive Design Mode (Option+Cmd+R). The page reloads in a resizable frame with presets for iPhone and iPad sizes, a device pixel ratio switch, and a user agent menu. It's good for checking layout and media queries quickly.

It does not emulate the iOS browser itself: no real touch handling, no iOS-only keyboard and viewport behavior, and the engine is still desktop Safari. For those, use the Simulator or a real device, below.

Safari network throttling

This is where Safari differs from Chrome. Current release versions of Safari have no throttling control in Web Inspector. WebKit removed an earlier experimental version, and a new built-in throttling feature landed in Safari Technology Preview 253 (September 2026). Expect it in a future Safari release; until then you have two options:

1. Safari Technology Preview: Apple's free preview browser, installed next to Safari, with the newest Web Inspector features.
2. Network Link Conditioner: an Apple tool in the "Additional Tools for Xcode" download from developer.apple.com/download. Install the preference pane, pick a profile like "3G" or "Very Bad Network", and switch it on. It slows all traffic on the Mac, not just one tab, so turn it off when done.

On an iPhone, the same conditioner is built in once the device is enabled for development: Settings > Developer > Network Link Conditioner.

Safari developer tools on iPhone and iPad

iOS Safari has no inspector on the device itself. You inspect it from Safari on a Mac:

1. On the iPhone or iPad, open Settings > Apps > Safari > Advanced and turn on Web Inspector (on iOS 17 and earlier, Settings > Safari > Advanced).
2. On the Mac, enable Show features for web developers as above.
3. Connect the device with a cable and tap Trust if asked.
4. Open the page in Safari on the device.
5. On the Mac, choose Develop > [your device name] > [the page]. Web Inspector opens against the live page on the phone.

For wireless debugging, pair the device in Xcode once (Window > Devices and Simulators, enable Connect via network). It then shows up in the Develop menu over Wi-Fi.

Web views in other apps are inspectable only if the app opts in. Since iOS 16.4, apps set isInspectable on their WKWebView (WebKit blog):

if #available(iOS 16.4, *) {
    webView.isInspectable = true
}

Chrome for iOS uses this too; see how to inspect Chrome on iPhone.

iOS Simulator

Install Xcode, open Xcode > Open Developer Tool > Simulator, and launch Safari inside it. Simulators always allow inspection, so the page appears under Develop > Simulator on the Mac with no settings to change. It's the fastest way to test iOS Safari without hardware, though performance and some device features differ from a real phone.

Safari Web Inspector vs Chrome DevTools

Need	Safari Web Inspector	Chrome DevTools
DOM/CSS editing	Elements tab	Elements panel
JS debugging	Sources tab	Sources panel
Network throttling	Technology Preview only (release Safari: use Network Link Conditioner)	Built in
Device emulation	Responsive Design Mode	Device Mode
Real iOS device debugging	Yes, from a Mac	No (iOS Chrome is WebKit)
Lighthouse-style audits	Audit tab (custom checks)	Lighthouse

If you need iOS coverage across many devices, a cloud device service or an automated cross-browser suite helps; browse testing tools on DevHunt and QA tools.

FAQ

Does Safari have developer tools?

Yes. Safari's developer tools are Web Inspector. They're hidden until you check Show features for web developers in Safari > Settings > Advanced.

Why is "Show features for web developers" not showing?

It's at the bottom of the Advanced tab in Safari Settings. On older Safari versions (16 and earlier) the checkbox is called "Show Develop menu in menu bar". On a managed Mac, an MDM profile can hide developer features.

How do I open the console in Safari on iPhone?

There is no console on the phone itself. Enable Web Inspector in the iPhone's Safari Advanced settings, connect it to a Mac, and choose the page from Safari's Develop menu; the Console tab shows the phone's logs.

Can I use Safari developer tools on Windows?

No. Safari for Windows was discontinued in 2012, and Web Inspector for iOS devices runs only on macOS. On Windows, use a cloud service with real Apple devices.

How do I throttle the network in Safari?

Release Safari doesn't have a built-in throttle yet. Use Safari Technology Preview, which added network throttling in release 253, or Apple's Network Link Conditioner, which slows the whole Mac's connection.