Web Inspector for iOS Development

If you have done any web related development you are probably aware of the Web Inspector that is available in Safari on your desktop system.  If not, here is how to enable this feature.

First you need to enable development mode in Safari.  To do this go to Preferences and select the Advanced Tab.  At the bottom of the Advanced page will be a checkbox to Enable the Develop Menu.

Enable Safari Develop menu

After enabling this option you will be able to bring up the web inspector for any web page shown in Safari.  The inspector provides many tools prototyping, optimizing, and debugging web content.  Take a look at Apples Safari Web Inspector Guide for details on this tool.

Web Inspector

But, did you also realize you can use the web inspector with your mobile device.  To enable this on Mobile open the settings app and go to the Safari Settings and select the Advanced Option. There you will see an option to enable the Web Inspector

Enable Inspector on Mobile

As the note in the preference screen says, connect your iOS device to your computer bring up safari on both the mobile device and desktop.  Then on the desktop, under the Develop menu, in the second section you will see the different devices for which you can launch the web inspector.  This will work for both tethered mobile devices as well as the iOS simulator.

Launch Web Inspector for Mobile

If you are developing an app that uses a web view you can also use the Web Inspector with that app.

Posted in Coding and tagged , , .