You can use Safari’s Web Inspector from your local Apple desktop/laptop to inspect browser pages on an iPhone or iPad.
Setup The iDevice
The first step is to make sure the Web Inspector setting is active on your iDevice.
- On the mobile device, tap the Settings icon.
- Tap to choose Safari from the list of software available on your device.
- Scroll to the bottom of the screen and then tap Advanced.
-
Scroll to the Web Inspector and make sure it is on.
Setup Safari
-
Open the Safari web browser on your local machine. You should see a Develop item in the top menu bar.
If you do not see the Develop menu item, you need to enable it in Safari.
-
Goto Safari > Preferences > Advanced and select the “Show develop menu in menu bar” checkbox.
Debug Your Page
- Connect (USB) the iDevice to your local machine.
- Open the mobile Safari web browser on the device and load your URL.
- Open the Safari web browser on your desktop.
- Open the Developer menu item. Right under the User Agent menu item you should see your device name.
- Click on your device. You should now see a menu which shows the page you just loaded on the mobile device.
-
Click the page name to open the Developer Tools which will now be looking at the page displayed on your device.
From this point forward, all navigation will happen on the mobile device and all debugging will happen through your local Safari’s Web Inspector.
To inspect an element, click the Inspect icon at the top of the Safari Web Inspector window on your desktop. Goto the device and tap the element on the page to inspect. The inspection results will show back in the Safari Web Inspector window on your desktop.