Normally when debuging HTML/CSS Javascript web applications you would turn to the browser console for any errors in your code.
Because phonegap applications are compiled into an apk and run ether on a mobile phone or in an emulator debugging is a lot harder.
I started out with adding javascript alert() functions into my code. These functions send out a message when ever a certain piece of code was called. This could only get my so far and it wasn’t greatly effective. I set out to research ways to debug in phone gap. Turns out there are alot of different programs to help with this task.
Ripple
Ripple is an extension for google chrome. It allows for hybrid mobile apps to be emulated in google chrome. It offers the ability to fire mobile events such as – volume up , volume down, app pause. The extension has a large number of devices to pick from.
Phonegap build
When uploading to your application to phonegap bild there is an option to debug the app. Phonegap build debug is able to retrieve information about the applications storage, network connections , HTML/CSS and access to a javascript console.
Chrome
Chrome has the ability to debug mobile apps while they are running on a mobile device debugging is done through a desktop. By connection your mobile phone to your desktop via USB and by visiting the following URL in chrome:
chrome://inspect/#devices
you can access the a console for any error logging, while the application is running on mobile phone.
My Thoughts
During the development of my applications I have used all of these methods of debugging for many different reasons, and have proven very useful. Out of all the debug methods I found Google Chrome’s device debug the most effective because it allows me the run the application in its native environment, this also gives me the piece of mind that I’m not going to come across any bugs during deployment.
Alex's blog 