Enable Remote Debugging with Safari Web Inspector in iOS 6

   Front End Development

*NOTE: You will need to upgrade to Safari version 6.0 to enable this functionality. *

With the recent release of iOS6, Apple has finally introduced a remote web inspector for debugging web applications on iOS devices. Enabling it is simple, but it’s buried under a few options on your phone.

On your device, head to Settings > Safari > Advanced

You’ll find the Web Inspector toggle there.

Web Inspector in Safari Settings

Once enabled, you’ll need to physically connect your iPhone or iPad to your Mac. Yes, this is Mac only at this point. In Safari’s Preferences pane under Advanced, check the Show Develop menu in the menu bar checkbox.

Safari Develop Menu

Select the Develop menu, and your iDevice should be a menu option. You should now be able to inspect DOM elements, modify CSS on the fly, and run Javascript commands.

iPhone Remote Debugging in Action

As a side note, this procedure will also enable remote debugging of your PhoneGap (Cordova) and other UIWebView based projects.

Do you need professional help with developing hybrid HTML5 mobile applications?


Like What You See?

Got any questions?