I recently started developing a mobile application for my MSc Thesis and decided to create a solution that could easily be ported to multiple mobile platforms. Searching around, I stumbled upon PhoneGap.
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
In order to install it, one needs to navigate to the Eclipse menu: Help » Install new software and select “Work With: All available Sites” in the window that pops up. Next, scroll down to the “Web, XML, Java EE and OSGi Enterprise Development” category and select “Eclipse Developer Tools”. Install the add on and restart Eclipse.
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 http://phonegap.com/products/. 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
By now, I had a solid debugging environment for when developing, warning me about syntax I messed up. If you are coming from a web development background you will probably be familiar with Firebug and the Firefox/Chrome/Safari developer tools.
Weinre started out as a project to allow people to remotely connect to their running PhoneGap applications and use a web kit developer tools GUI to debug them. You can now find Weinre here.
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
index.htmlhead1<span class="tag"><script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"http://debug.phonegap.com/target/target-script-min.js#YOUR_GUID_HERE"</span><span class="tag">></script></span>
- Compile and start up your application
- Once it’s running, visit http://docs.phonegap.com/. 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.