iOS PhoneGap debug Workflow

Question

How do you debug javascript in Xcode?

One thing that I can do is open the page in OS X Chrome browser, but naturally this will not work for application flow involving native code. Is there a smart Xcode trick that I am missing.

Answer 1

With the release of iOS 6, Apple released remote Web Inspector for their Mobile Safari in conjunction with Mac Safari 6, and this is huge. Basically you have all the features and power of Web Inspector in regular Safari, for your mobile apps, including Phonegap apps. I've used weinre and this makes it obsolete for newer versions of iOS (but not for old versions of iOS, non-iOS devices such as android, or if you're on Windows).

Here's how it works (requires a Mac, either xCode 4.5+ running an iOS 6+ simulator or an iOS 6+ device, and Safari 6+ on your Mac):

in your ios simulator or ios device,open settings --> Safari --> Advanced --> Web Inspector --> (turn On) . (this is on by default in the simulator, but its worth checking)

In Safari, after you've started your phoneGap/cordova app and its loaded & running, access iPhone Simulator or your device from the Develop menu. You can enable Develop menu in Safari's Advanced Preferences, if its not already.

More discussion at the bottom of: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers

(also, if you read about a "secret private interface" somewhere, this doesn't work anymore.)

Answer 2

Try using weinre it is a really good tool to debug javascript applications on mobile devices.

http://people.apache.org/~pmuellr/weinre/docs/latest/

Although you will still not be able to debug the script step-by-step as it gives on desktop but gives lot more detail than xcode (~ for javascript).