iOS Safari Remote Web Inspection

Front-end devs rejoice! Mobile Safari now supports remote web inspection as of iOS 6! Android and BlackBerry devices have enjoyed this for a little while so it’s nice to see Apple finally giving us some debugging capabilites for Mobile Safari.

To enable Mobile Safari’s remote web inspection all you need to do is:

  1. In Settings.app on your device, select Safari > Advanced and then enable Web Inspector.
  2. Connect your device to your computer via your cable.
  3. Load the web page you want to inspect in Mobile Safari.
  4. Now, in Safari on your desktop, select Develop > iPhone Simulator1 and then select the appropriate page from the list.

The web inspector panel will open giving you access to all the wonderful web inspection goodies you’ve come to expect from your desktop browser. Hover highlights, live editing, it’s all there.

Awesome!

  1. If you don’t see the Develop menu then you need to enable it in Safari’s Preferences. Select Safari > Preferences > Advanced and check Show Develop menu in menu bar.