How to Debug iPhone Safari Webpages Using a Mac

This article provides a complete walkthrough for developers on how to inspect and debug live webpages running in Safari on a physical iPhone using a Mac. The process involves enabling hidden developer settings on both your iOS and macOS devices, establishing a trusted physical connection via USB, and utilizing the macOS Safari Web Inspector to manipulate the DOM, debug JavaScript, and analyze network activity in real time.

Step 1: Enable Web Inspector on Your iPhone

Before your Mac can communicate with Safari on your iPhone, you must enable the Web Inspector feature on the mobile device.

  1. Open the Settings app on your iPhone.
  2. Scroll down and tap on Safari.
  3. Scroll to the very bottom and tap on Advanced.
  4. Toggle the Web Inspector switch to the ON (green) position.

Step 2: Enable the Develop Menu in Safari on Your Mac

By default, Safari on macOS hides its developer tools. You need to enable the Develop menu to access connected devices.

  1. Open the Safari browser on your Mac.
  2. In the top menu bar, click Safari and select Settings (or Preferences on older macOS versions).
  3. Click on the Advanced tab.
  4. At the bottom of the window, check the box next to Show features for web developers (on older macOS versions, this is labeled Show Develop menu in menu bar).
  5. Close the Settings window. You will now see a Develop option in the top menu bar.

Step 3: Connect Your iPhone to Your Mac

You must establish a physical, trusted connection between the two devices.

  1. Plug your iPhone into your Mac using a USB-C or Lightning cable.
  2. Unlock your iPhone.
  3. If prompted with a Trust This Computer? alert on your iPhone, tap Trust and enter your device passcode.

Step 4: Open the Webpage and Launch the Inspector

Once both devices are configured and connected, you can begin the debugging session.

  1. On your iPhone, open the Safari app and navigate to the webpage you want to debug. Keep the screen unlocked and Safari open in the foreground.
  2. On your Mac, return to the Safari browser.
  3. Click on Develop in the top menu bar.
  4. In the dropdown menu, locate your iPhone's name. Hover your cursor over it to see a list of currently open Safari tabs on your phone.
  5. Click on the specific webpage URL you wish to inspect.

Step 5: Debug the Webpage

Clicking the URL in the Develop menu immediately opens a new Safari Web Inspector window on your Mac, linked directly to the tab on your iPhone.

  • Elements: Hover over DOM nodes in the Elements tab on your Mac to highlight the corresponding elements directly on your iPhone's screen. You can edit HTML and CSS in real time to test responsive layouts.
  • Console: View logs, errors, and warnings generated by the mobile webpage, and execute JavaScript commands directly against the iPhone's browser context.
  • Sources: Set breakpoints to step through JavaScript execution triggered by touch events on the iPhone.
  • Network: Reload the page from your Mac or iPhone to analyze network requests, payload sizes, and loading times over the mobile connection.

Enabling Wireless Debugging (Optional)

If you want to unplug your iPhone and continue debugging over Wi-Fi, ensure both devices are on the same wireless network. Open Xcode on your Mac, go to Window > Devices and Simulators, select your connected iPhone, and check the Connect via network box. Once paired, your iPhone will appear in the Safari Develop menu even when disconnected from the cable.