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.
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.
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!
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.
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!
Thx !! Works perfectly.
This is great info Heidi, and I’m thankful for it.
Keep it up!
MB
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?
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