Home > iOS, Mobile Development, PhoneGap > Debugging iOS Apps Using Safari Web Inspector

Debugging iOS Apps Using Safari Web Inspector

 

Enabling Remote Debugging using Safari Web Inspector for iOS

 
Wow! What a day! While researching debugging techniques for an upcoming training class I am teaching on PhoneGap, I stumbled over a couple of blogs about a private API in iOS5 that will allow you to debug your UIWebViews right inside desktop Safari using the Web Inspector!

It’s so simple! All you have to do is add this to your AppDelegate:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Uncomment to enable remote debugging
    [NSClassFromString(@"WebView") _enableRemoteInspector];
....

Then use Safari to access http://localhost:9999 and you are debugging with Web Inspector and have full debugging capabilities including breakpoints and DOM manipulation among other things!

It only works on iOS5 and it only works when running in the simulator BUT it’s an awesome upgrade from Weinre if you are building an iOS app.

Kudos to @atnan for finding it!!

References

See this blog by @atnan for more info and tips for enabling debugging for Mobile Safari in iOS.

Also see this blog by @firt for a nice tool – iWebInspector – that makes enabling debugging a little easier.

About these ads
  1. November 23, 2011 at 1:32 AM

    thanks for this. just in time for us. we’re wrapping an app leveraging sencha’s touch api and this will be an indispensable part of the toolbox.

  2. Steven Romalewski
    December 13, 2011 at 6:57 AM

    Thanks for the heads up, great find.

    A relates question: do you know of any downsides to upgrading to iOS5 if you’re using your phone to develop/test Phonegap apps? I’m still running iOS 4.3. I’d rather not upgrade if that requires me to use features in my apps that are only accessible to others using iOS5 but not to people who haven’t upgraded yet.

    Thanks for a great blog!

    • December 15, 2011 at 9:34 AM

      Upgrading to iOS 5 doesn’t force you to use any features – you do need to be conscious of what features you are using based upon your deployments targets – meaning don’t use specific ios5 APIs of you plan to deliver to earlier phone versions.

      • December 15, 2011 at 9:04 PM

        Thanks Heidi. So, presumably there’s a way to check if my app has been installed on a phone with an earlier OS, and then have my content configured so it’s OS-specific? I would imagine the Phonegap device api would be used for this purpose. Are there best-practices along these lines you’d suggest looking at? Thanks!

  3. December 13, 2011 at 8:22 AM

    Thx !! Works perfectly.

  4. Mike Bria
    December 13, 2011 at 4:57 PM

    This is great info Heidi, and I’m thankful for it.

    Keep it up!

    MB

  5. February 13, 2012 at 2:10 PM

    Yes! This is much cleaner than Weinre for iOS. I have an issue though; my console.log() (or .error(), .warn(), etc.) calls are not logging to the console. This happens in Weinre too. Have you encountered this?

  6. February 26, 2012 at 2:38 PM

    I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon. best regards Webdesign

  1. December 7, 2011 at 6:08 AM
  2. February 14, 2012 at 3:04 PM
  3. February 17, 2012 at 9:31 PM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 34 other followers

%d bloggers like this: