Aug 27 2012Tweet this
Debugging PhoneGap Applications
I began by downloading PhoneGap and setting it up on my Eclipse development environment. After an hour of understanding how the premise works, setting up html, css and js files and actually building something that I could deploy on my phone, it became clear to me that I needed something to debug this thing other than console.log(). Following are the steps I went through to be able to properly debug my PhoneGap app, from validation when writing the code, to real time debugging of the application as if it were an HTML website.
Configuring a proper web editor
Now you can actually open HTML/CSS files inside Eclipse and by right clicking on the source code you can opt to validate your file, but as far as I could tell, the same doesn't apply to JS files (ie. the validator doesn't work as expected). Since PhoneGap applications rely heavily on JS for most of the logic and control, I needed something that would help me identify problems before I would deploy it to my device or emulator.
In order to install it, you again select Help >» Install new software, but this time, press the "Add" button to the right of the "Work With" text field. Type in a name for your new source (I named mine "JSLint") and for a URL, copy and paste https://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/jslint4java1/download. Next, accept the terms, skip the warning about unsigned content and finish the installation. Restart Eclipse.
- JSLint is inherently pretty strict in what it complains about. In order to prevent it from warning you about stuff that you don't want to be warned about, you can visit Eclipse » Preferences » jslint4java and customize its behavior. A good place to start is the number of spaces used for indentation (I put mine at 2), "If debugger statements should be allowed" (I set mine to true) and "If logging should be allowed" (also true).
- If you are using jQuery or jQuery mobile, JSLint will complain about the dollar sign with the message "
$ is not defined". To fix this, navigate to the jslint4java settings and add the
$sign to the textbox with the label "The names of predefined global variables".
Real time debugging
The process to get a fully working real time debugging environment with Weinre is now a lot simpler than it used to be. One just needs to follow these steps:
- Copy & Paste this line to your PhoneGap application's
- Compile and start up your application
- Once it's running, visit http://debug.phonegap.com/client/#YOUR_GUID_HERE. You can now remotely observe and talk to your app.
Debugging as it should be
Following the above steps I managed to create a robust working and debugging environment, which should make the coming months of developing my mobile application much easier.