Inspect an iPhone Safari Tab from Your Mac (The Clean Way)

Debug iPhone Safari bugs the right way (on the real device)

Introduction

You push a build. It looks fine on desktop. On iPhone, something feels off — layout shifts, a script dies, a tap lags.

You could guess and ship again. Or you can debug the real device. Safari’s Web Inspector lets you see logs, DOM, CSS, and network calls from your iPhone, right on your Mac. It feels like Chrome DevTools, but for mobile Safari. You set breakpoints, tweak styles live, and watch fixes land in real time. It removes the guesswork and shortens that painful bug loop.

What You Need

• You need a Mac with Safari up to date. Web Inspector lives inside Safari, so keep it current to avoid feature gaps.
• You need an iPhone on iOS 17 or 18. Older iOS works, but 17+ is stable, predictable, and matches what users run today.
• You need a USB cable for the first pair. After the first successful wired session, you can continue over Wi-Fi if both devices share the same network.

Set It Up

Step 1. Enable Web Inspector on iPhone

Go to Settings → Safari → Advanced and toggle Web Inspector on. If you don’t see this option, open Settings → Privacy & Security and enable Developer Mode.

Optionally, enable Remote Automation if you plan to drive pages or run more advanced tests. This setting allows Safari to stream logs, DOM, and network details to your Mac.

Step 2. Show the Develop Menu on Mac

Open Safari on the Mac. Go to **Safari → Settings → Advanced → **Check Show features for web developers. You’ll see a Develop menu in the menu bar. That’s your gateway to the iPhone.

Step 4. Connect and Trust the iPhone

Plug in the iPhone with a cable the first time. If you see Trust This Computer on the phone, tap Trust, then enter your passcode. Keep Safari open on both devices so the connection stays active.

Step 5. Open the Web Inspector

On the iPhone, open the target page in Safari. On the Mac, click Develop in Safari. You’ll see your iPhone listed. Hover the device name to see open tabs, then pick your page title.

A new window opens: Web Inspector. It’s Apple’s devtools for Safari. You get tabs for Elements, Console, Network, Sources, and Storage. It mirrors the page running on the phone and lets you change things live.

How to Debug

✅ See Console Logs

Open Console in Web Inspector. You’ll see console.log, warnings, and errors stream in as they happen on the phone. Turn on Preserve Log to keep history across reloads. Use ⌥⌘C to toggle the Console fast. This is perfect for quick checks, feature flags, and runtime errors.

✅ Inspect the DOM and Styles

Open Elements. Hover nodes to highlight them on the iPhone screen. Edit HTML or tweak CSS rules and watch the phone update instantly. Use the Styles pane to test selectors, override rules, and verify specificity. This makes layout and pixel fixes painless.

✅ Debug JavaScript

Open Sources. Click a line number to add a breakpoint. Reload the page or trigger the action to break on the phone’s runtime. Step over, step into, and watch variables in Scopes. This is how you chase down timing bugs and bad state.

✅ Check Network Calls

Open Network and reload. You’ll see every request, with status, timing, headers, and payloads. Filter by type to find XHR or fetch calls quickly. Open a request to inspect headers, response, and preview JSON. Great for CORS issues, caching, and API mismatches.

✅ Storage and Cookies

Open Storage. Browse cookies, localStorage, and sessionStorage. Delete keys to test fresh states, new users, or broken sessions. It’s also useful for verifying SameSite and secure cookie flags.

✅ Work with PWAs and WebViews

If you debug a PWA, you’ll see its entry under your iPhone in the Develop menu. If an app embeds a webview, that app shows up too. Pick the right entry, and the same tools apply — Elements, Console, Network, and more.

✅ Use Over Wi-Fi After Pairing

After one successful wired session, you can go wireless. Keep both devices on the same network. Your iPhone will still appear under Develop. This is handy for quick repros without a cable on your desk.

Common Issues and Fixes

• **iPhone not listed at all ** Unlock the phone, replug the cable, and keep Safari open on both devices. Try a different cable or port. Trust prompts can be finicky. If nothing shows, toggle Developer Mode off and on, then reboot.
• **No pages listed under the iPhone **Make sure the page is a normal tab, not Private Browsing. Open a standard Safari tab on iPhone and reload. Backgrounded tabs sometimes don’t appear — keep it foregrounded.
• **Console shows nothing **Confirm Web Inspector is enabled on the iPhone. Turn on Preserve Log if reloads clear messages you need.
• **Develop menu is missing on Mac ** Re-check Show features for web developers in Safari’s Advanced settings. If it still won’t appear, quit Safari and open it again.
• **Breakpoints not hitting ** Source maps might not match your build. Verify you’re loading the same bundle the phone sees. Hard refresh on iPhone (close tab, reopen) to clear cache.
• Network requests look cached Disable cache in the Network panel while Web Inspector is open. Add cache-busting query params when testing APIs.
• Wi-Fi session not showing Do one wired session again to re-pair. Keep both devices on the same subnet; guest networks can block discovery.

Safety Tips

Use a trusted Mac only. Web Inspector exposes app and page context. Turn off Developer Mode when you’re done. It reduces attack surface. Avoid logging secrets in the Console. Treat it like a shared screen. When sharing screenshots, blur tokens, cookies, and user data. If you work with production data, confirm you follow your company policy.

Quick Checklist (Print and Stick on Your Monitor)

• Developer Mode on iPhone: On after reboot.
• iPhone Safari Web Inspector: On in Advanced.
• Mac Safari Develop menu: On in Advanced settings.
• Devices connected and Trusted at least once by cable.
• Target page open on iPhone in a non-Private tab.
• In Mac Safari: Develop → [iPhone] → [Your Page].
• Use Console, Elements, Sources, Network, Storage to debug.
• Turn on Preserve Log and Disable Caches when needed.
• For wireless, keep both devices on the same network.

Wrap Up

Real-device bugs are sneaky. Web Inspector brings the iPhone’s view to your desk. Once you wire it up, fixes get faster, and your QA loop shrinks. Open the page on your phone, pick it under Develop, and start inspecting.

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community. Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community.

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok, Instagram. You can also subscribe to our weekly newsletter. And before you go, don’t forget to clap and follow the writer️!