Debugging support for PhoneGap apps is not yet as well-developed as for native apps or for pure web apps. The big lack is that when working on your mobile device or simulator, you won't have breakpoints or stack traces. Nonetheless, there's still a lot you can do.
The main debugging techniques are:
1) Debug first on your desktop. Since you're working with javascript/html/css - you can debug most of your app on your desktop with your favorite web environment (Firebug, etc.). Depending on your app, you may want to include code that mocks up (ie., provides stubs for) the PhoneGap API, so your app doesn't croak on the desktop. Here are a couple of projects to do that:
http://ripple.tinyhippos.com/ -- Ripple emulator runs as a Chrome plugin and provides a UI to enable you to provide data to PhoneGap API calls.
https://github.com/jxp/phonegap-desktop -- PhoneGap desktop: A pure javascript library, it allows you to return data from a json file for each PhoneGap API call. This allows pre-saved test data to be re-used. It is also written to be easily extendable to perform the same function for plugins.
https://gist.github.com/476358
https://github.com/alunny/stopgap
2) Use a Remote Web Inspector. Not quite a full-fledged debugger, web inspectors give you a live view of your code while running on your mobile device and a limited ability to interact with it. No breakpoints or stack traces but you can edit css and basically see everything except the script tab in your favorite browser-based debugger. There are two ways to do this, basically equivalent results:
http://phonegap.github.com/weinre/ (Weinre)
http://www.mobilexweb.com/blog/debugging-web-safari-phonegap-iphone-ipad (WebKit private API -- a little easier to set up, but iOS only)
3) console.log() and alerts Once deviceReady() has fired, console output becomes available. For iOS, you can see it in the Debug Area in Xcode. For Android the tool LogCat provides the console.log() printouts. LogCat is integrated to the Android Eclipse plugin so logs from device and emulator can be seen in the UI of Eclipse.
Material below is a bit older and may be of historical interest:
Webkit Nightly and Safari
If your code runs the same in Webkit desktop as on the phone, you can use the Webkit Nightly debugger which Brian Leroux claims is better than standard Safari (3?) debugger:
Best debugger hands down in the webkit nightly. Click on preferences >
advanced and check the 'show developer tools' on the bottom.
Close the dialogue. Right click on an element > Inspect element
....voila. A full fledged debugger.
Reverend responded:
Another option is using Safari 4 (beta), which was released yesterday. It has a full-fledged debugger as well.
Firebug for IPhone
Firebug for IPhone is basically "a little Python web server which acts as a bridge between your iPhone and the Firebug console running in the browser on your computer. When you call console.log() on the phone it sends your log message to the server, which reflects it back to Firefox (or Safari or whatever), which displays it in your nice big Firebug console. You can also enter JavaScript commands in the command line in Firefox and have them sent to the phone, evaluated, and sent back to Firefox. It all works surprisingly well!"
Dashcode
Nathan Freitas says:
Another approach is to use Apple Dashcode to build your iPhone web app, the debugging built into that is pretty excellent.
XCode Console from Javascript
Scott McWhirter says:
Michael Nachbaur and I have added the ability for console logging from
phonegap to be shown directly in the XCode debugger console.
http://github.com/NachoMan/phonegap/tree/master
(Of course it's only useful in the simulator, but better than nothing)
Brian Leroux says:
"this is a great addition -- we'll be adding it in to the sintaxi branch"
It wasn't clear why this would only work in the simulator and not when the phone is running under the debugger.
