How to Use Web Inspector to Debug iOS device

Environment:

iOS
iPhone
iPad
Mac

Prerequisites:

• Please note that a Mac computer is required for this process as Safari's Web Developer is only compatible with Macs
• Make sure Safari on your Mac is the same version as Safari on your iDevice. You may need to update your iOS version or your version of Safari running on your Mac.

Procedure

Use Web Inspector to debug mobile Safari

1. On your iPad, iPhone or iPod touch, tap Settings | Safari | Advanced and toggle on Web Inspector. And enable JavaScript if it isn’t already enabled.
2. On your Mac, launch Safari and go to Safari menu | Preferences | Advanced then check 'Show Develop menu in menu bar' if not already enabled.
3. Connect your iOS device to your Mac with the USB cable. This is critical, you must connect the devices manually, using a cable. This does not work via WiFi.
4. On your iOS device, open the website that you want to debug. Then, on your Mac, open Safari and go to the 'Develop' menu. You should now see your iOS device that is connected to your Mac. (Note: If you do not have any page open on your iDevice, you see a message saying “No Inspectable Applications.”)
5. Now debug the page that is open on your mobile Safari using the same methods you would for debugging on Mac.
6. Within the developer tools window, navigate to the 'Network' tab and export the .har file if requested.

See also:

• Additional information is provided from the following external web pages:
  • Safari Developer Help
  • How to Use Web Inspector to Debug Mobile Safari (iPhone or iPad)
  • Get Oriented