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 remembered having read positive things about it a couple of years ago, when I was developing my first mobile application in Android. What PhoneGap essentially does, is expose mobile phone functions through a set of JavaScript APIs and the application’s logic runs inside a native WebView control.
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
Since I would be working with web related technologies, I needed an editor that could handle them and help me with some basic developer-friendly features. That editor becomes available by downloading the Web Developer Tools add on for Eclipse. WDT enables you to have a decent HTML/CSS/JavaScript editor available in Eclipse and will also enable syntax validation for those languages.
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.
Enter JSLint
JSLint, is the most well known JavaScript code quality control and debugging tool. It provides syntax validation in a very deep level and with options to customize its rules to your specific needs. Thankfully, there is an add on which can bring JSLint functionality to Eclipse in the form of a Java wrapper, called jslint4java.
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.
Once you reopen Eclipse, right click on your project in the project browser on the left side of your screen and select “Enable jslint4java”. Open up a JavaScript file and… voila! You now have working JSLint syntax validation in your Eclipse environment.
Notes:
- 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.
Since we are developing an application with PhoneGap, one can see how similar it is to developing an HTML webpage with lots of JavaScript.
So wouldn’t it be cool if you could debug all that javascript/html/css, local storage requests and check what files are loaded in your app with tools which you have used before? As it turns out, other people have had this request as well.
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.htmlhead<script src="http://debug.phonegap.com/target/target-script-min.js#YOUR_GUID_HERE"></script>
- 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.
