iOS Safari - Debug a Mobile Site

When an iOS device is connected via Remote Debugging, your machine treats it as if it is connected locally via USB.

This allows Safari to see the device as locally connected which is why it then enables you to debug your mobile site.

info

• Make sure Web Inspector is enabled on your iOS device.  Click Settings -> Safari -> Advanced and enable Web Inspector.

• When debugging mobile sites using Safari on Mac, Safari must be closed before the Remote Debugging session is initiated. To do this:

  1. Use Chrome to open the device and initiate the Remote Debugging session.

  2. Start the session from command line: ./rdb start-remote-debug --url <> --access-key <> --serial-number <>

  3. Open Safari on your Mac machine, and then the developer tools.

  4. If you encounter issues when inspecting Safari might have some issues, add --debug-safari to the command line:  ./rdb start-remote-debug --url <> --access-key <> --serial-number <> --debug-safari

warning

If the session was started, but you cannot inspect websites on the debugged device:

1. Locate the *.vmoptions file in the installation directory.
2. Add -Ddebug.safari=true to the *.vmoptions file, followed by a line break.
3. Restart the remote debugging service.

Set up

1. Open a device in manual mode.
2. Open a Remote Debugging session.
3. Open Safari on the device.
4. Navigate to the site to debug.

Connect to the Device and Open a Site

1. Open Safari on your Mac.
2. At the top menu bar click Develop.
3. Click the device, then click the site that you opened in Set Up.

Inspect and Debug

Once you click the site that you previously navigated to, a window opens showing the DOM structure and CSS.

Hover over the DOM to determine the location of elements in the site and change the CSS to see how the site reacts to changes.