Debugging a PhoneGap application

Question

I am new to PhoneGap development and had just picked with the most basic approaches of it.

How can we debug an application developed using PhoneGap. Debugging the application built on phonegap over the browser is easy as we can see the browser console. But things change a lot when the same application is build using phonegap and packaged in the APK file.

I tried some Android Command Line emulator apps, but was not successful to see the logs.

While developing the android application I had used log.v and in phonegap I am using console.log.

How can I see the logs I am making in the application. Is there any way to get the logs for the application built by Phonegap.?

Answer 1

Debugging phonegap is nothing but debugging JS. we had a tough time doing so. but Weinre was very helpful for our (partially) purpose. just install weinre and have the code injected to your device index.html. now you can get what is happening through the device console in the webinspector. hope this helps you...

Answer 2

If you are starting with phonegap you should read this link:

http://cordova.apache.org/docs/en/3.5.0/guide_next_index.md.html#Next%20Steps

It include a lot of useful information about phonegap programming, debugging, etc.

Debugging

Debugging Cordova requires some setup. Unlike a desktop application, you can't simply open dev tools on your mobile device and start debugging, luckily there are some great alternatives. Safari Remote Debugging

The first option is Safari Remote Debugging. This works only on OSX and only with iOS 6 (and higher). It uses Safari to connect to your device (or the simulator) and will connect the browser's dev tools to the Cordova application. You get what you expect from dev tools - DOM inspection/manipulation, a JavaScript debugger, network inspection, the console, and more. For more details, see this excellent blog post: http://moduscreate.com/enable-remote-web-inspector-in-ios-6/

Chrome Remote Debugging

Virtually the same as the Safari version, this works with Android only but can be used from any desktop operating system. It requires a minimum of Android 4.4 (KitKat), minimum API level of 19, and Chrome 30+ (on the desktop). Once connected, you get the same Chrome Dev Tools experience for your mobile applications as you do with your desktop applications. Even better, the Chrome Dev Tools have a mirror option that shows your app running on the mobile device. This is more than just a view - you can scroll and click from dev tools and it updates on the mobile device. More details on Chrome Remote Debugging may be found here: https://developers.google.com/chrome/mobile/docs/debugging

It is possible to use Chrome Dev Tools to inspect iOS apps, through a WebKit proxy: https://github.com/google/ios-webkit-debug-proxy/

Ripple

Ripple is a desktop based emulator for Cordova projects. Essentially it lets you run a Cordova application in your desktop application and fake various Cordova features. For example, it lets you simulate the accelerometer to test shake events. It fakes the camera API by letting you select a picture from your hard drive. Ripple lets you focus more on your custom code rather than worrying about Cordova plugins. You can find out more about Ripple here: http://ripple.incubator.apache.org/

Weinre

Weinre creates a local server that can host a remote debug client for your Cordova applications. After you've installed and started it up, you copy a line of code into your Cordova application and then restart it. You can then open a dev tool panel on your desktop to work with the application. Weinre is not quite as fancy as Chrome and Safari Remote debugging but has the benefit of working with a much greater range of operating systems and platforms. More information may be found here: http://people.apache.org/~pmuellr/weinre/docs/latest/

Other Options

BlackBerry 10 supports debugging as well: Documentation
You can debug using Firefox App Manager as well, see this blog post and this MDN article.
For more examples and explanation of the above debugging tips, see:

http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/

Answer 3

In Android you can debug your app in eclipse logcat where all javascript and other errors will be shown in console.

But for ios you need to install phonegap console plugin to see errors. install below plugin from url.

https://github.com/apache/cordova-plugin-console

Hope this helps..

Thanks