Live Testing
Page tree

Versions Compared

Old Version 2

changes.mady.by.user user-9f8c1

Saved on

compared with

New Version Current

changes.mady.by.user user-3587b

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

Info
Please make sure Web Inspector is enabled on your iOS device: go to Settings -> Safari -> Advanced and enable Web Inspector.
Warning

When debugging mobile sites using Safari on Mac, Safari must be closed before the Remote Debugging session is initiated. Since it is not possible to keep a remote debugging session active when the browser is closed :

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.

Setting Up

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

Note
titleTroubleshooting

In case session was started, but you cannot inspect websites on the debugged device, you can follow these steps:

  1. Locate the installation dir, and locate *.vmoptions file inside it
  2. Add "-Ddebug.safari=true" to vmoptions file, followed by a line break.
  3. Then restart the remote debugging service.
SEO Metadata
titleiOS Safari - Debug a Mobile Site

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

Setting up


Connecting to

Device

device and

Opening Site

opening site

Open Safari on your Mac

At the top menu bar click on click  "Develop" → choose the device → click on the site that you opened in the previous step.


Inspecting and

Debugging

debugging

Once you click on 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.