Debugging Cordova (PhoneGap) code on iOS

Question

I'm working on an app I want to host in iOS via Cordova (PhoneGap). I've run into some problem when I try to access the device.platform and device.version properties. I'm not sure what the problem is. Either way, I can't figure out how to peek into the code to get a better idea of what's going on.

I thought I could just fire up the .html in the desktop version of Safari, however, that didn't provide any insights. In short:

1. How do I debug code running inside of Cordova?
2. Any ideas why I can't just do a "alert(device.platform);"?

Thank you!

Answer 1

Since iOS 6 you can just enable the Develop menu in Safari and use Safari Web Inspector to remotely debug Cordova app in either iOS Simulator or USB attached devices. If you've used Chrome's debugger you'll feel right at home.

Answer 2

1. I use nifty debugging tool called Weinre , which is a lifesaver when debugging cordova( phonegap) apps. It basically is a remote debugging tool resembling usual webkit developer tools available in Chrome and some other browsers.

2. Make sure that Cordova is loaded before you try to call device.platform. Cordova is loaded when deviceready js event is triggered.

Answer 3

as well as Weinre, there is also iWebInspector which is useful and perhaps better on ios. http://www.mobilexweb.com/blog/debugging-web-safari-phonegap-iphone-ipad

I think it maybe only applies to the simulator but thats fine for most cases anyway. It is more Xcode and iOs debugging solution in my opinion .