When an iOS device is connected via Remote Debugging, your machine will treat 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.
When debugging mobile sites using Safari on Mac, Safari must be closed before the Remote Debugging session is initiated.
1. You should use Chrome to open the device and initiate the Remote Debugging session.
2. When starting the session from command line, i.e., ./rdb start-remote-debug --url <> --access-key <> --serial-number <>
3. And only then open Safari on your Mac machine - and the developer tools.
4. Troubleshooting - in some cases - inspecting safari might have some issues, you can add the following optional flag "--debug-safari" to the command line, i.e. ./rdb start-remote-debug --url <> --access-key <> --serial-number <> --debug-safari
Troubleshooting
In case session was started, but you cannot inspect websites on the debugged device, you can follow these steps:
- Locate the installation dir, and locate *.vmoptions file inside it
- Add "-Ddebug.safari=true" to vmoptions file, followed by a line break.
- Then restart the remote debugging service.
Setting up
- Open device in manual mode
- Initiate Remote Debugging session
- Open Safari on the device
- Navigate to the site you wish to debug
Connecting to device and opening site
Open Safari on your Mac
At the top menu bar click "Develop" → choose the device → click the site that you opened in the previous step.
Inspecting and debugging
Once you click the site that you previously navigated to, a window will popup 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.
