How to debug safari on iPad, iPod, iPhone

by

The steps below show how to access the debug console for a iOS8 device.

You will need:

  1. An iPad, iPod or iPhone
  2. A USB cable
  3. An Mac OS computer with Safari installed

Step 1 – Enable debug mode on the device

  1. Open the ‘Settings’ menu
  2. iOS8-RemovedSavedPasswords1
  3. Scroll down until you see ‘Safari’ and click on it
  4. Under the Safari settings scroll down until you see ‘Advanced’ and click on it
  5. Enable ‘Web Inspector’

Step 2 – Connect the device to the Mac OS computer

  1. Using the USB cable, plug the device into your Mac OS computer.

Step 3 – Enable the debug tools in Safari

  1. On the Mac OS computer, open Safari
  2. Open the ‘Safari’ menu then click on ‘Preferences’
  3. iPad-DebugWebsites1
  4. Click on ‘Advanced’ in the toolbar then tick ‘Show Develop menu in the menu bar’
  5. iPad-DebugWebsites2
  6. Close the window.

Step 4 – Connect Safari to the device and launch the debug console

  1. On the iOS device – open Safari and go to the website you want to debug
  2. Open the ‘Develop’ menu
  3. In the menu you will see the name of your device, in this case it’s “iPad”
  4. Open the menu for your device then click on the address of the website
  5. iPad-DebugWebsites3
  6. The screen on the device will briefly flash and the “Web Inspector” window will open on the Mac OS computer
  7. Any browsing the website and background Ajax requests will now be captured in the Web Inspector
  8. Ajax requests will appear on the “Network” tab
  9. To view the details of the request, for example the header and post information, click on the button at the top right of the window
  10. iPad-DebugWebsites4
  11. Request errors and script errors will appear in the “Console” tab.
  12. iPad-DebugWebsites5