Connect Safari Web Inspector to the Xcode iOS Simulator

This article provides a step-by-step guide for developers on how to connect the macOS Safari Web Inspector to an instance of the Safari web browser running inside the Xcode iOS Simulator. By linking these tools, you can inspect elements, debug JavaScript, and analyze network activity on a simulated mobile webpage directly from your Mac without needing a physical iOS device.

Prerequisites

Before starting, ensure you have Xcode installed on your Mac. Xcode includes the iOS Simulator app required for this process. You will also need the desktop version of the Safari web browser.

Step 1: Enable the Develop Menu in macOS Safari

By default, Safari hides its developer tools. You must enable them on your Mac first.

  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 (or Show Develop menu in menu bar on older versions).
  5. Close the Settings window. You will now see a Develop option in the top menu bar.

Step 2: Launch the iOS Simulator and Open a Webpage

Next, you need to start the simulated iOS environment and give the Web Inspector a page to inspect.

  1. Open Xcode.
  2. In the top menu bar, click Xcode, hover over Open Developer Tool, and select Simulator.
  3. Wait for the simulated iPhone or iPad to finish booting up.
  4. Inside the Simulator, click on the Safari app icon to launch the mobile browser.
  5. Navigate to the website or local development server URL you wish to debug.

Step 3: Connect the Web Inspector

With the webpage open in the Simulator, you can now link it to your desktop browser.

  1. Switch back to the desktop Safari application on your Mac.
  2. Click on Develop in the top menu bar.
  3. In the dropdown menu, locate your active Simulator device (it will be listed by its model name, such as "iPhone 15 Pro" or "Simulator").
  4. Hover your cursor over the Simulator's name. A secondary menu will appear showing all open tabs within the simulated mobile Safari.
  5. Click on the URL of the webpage you want to inspect.

Debugging Your Webpage

Immediately after clicking the URL, the macOS Safari Web Inspector window will open. This window is now actively connected to the iOS Simulator.

You can use the Elements tab to modify the DOM and CSS in real time, the Console tab to view logs and run JavaScript commands, and the Network tab to monitor requests. Hovering over elements in the Web Inspector on your Mac will highlight the corresponding elements directly inside the iOS Simulator screen.