PhoneGap Tip: Debugging PhoneGap Apps
When writing native apps, you generally have a pretty nice debugger in the IDE. Unfortunately, when your code is running under Cordova, you lose out on the native debugger because it has no idea about how to debug HTML, CSS, and Javascript. To combat this, we often build a good majority of our apps in a desktop browser, like Safari or Chrome, where we can use the WebKit inspector (or similar tools in Firefox and IE) to debug any failing code. But this only works if your code doesn’t rely on any of Phonegap’s features.
So what happens when you take all of your nice code, images, and stylesheets, put them all together under Phonegap, add in your Phonegap-specific code and suddenly your app breaks? Or worse yet — maybe the app doesn’t even run and you just end up with a black or white screen?
Console Logging
When I first started with Phonegap, I was reminded of the kind of debugging I had to do when I started programming on my Commodore 64. BASIC had no formal debugger — you had to put PRINT statements in to display the contents of various variables, or STOP the program in the middle of the execution state to see what was going on.
In a way, logging to the console is a lot like this technique. All you have to do is place console.log() in strategic places in the code, and the output will show up in your IDE’s log.
That said, this is a pretty painful way to debug, simply because it involves a large amount of guessing as to where the error is and a general idea of what error is occurring so that you can display some state. Then you either have to comment out the console.log() statements or delete them prior to production.
Sometimes it is even difficult to get a console.log() to execute at all, especially if some particular piece of code is throwing an exception. Generally the easiest solution to this is something along these lines:
try {
... problematic code ...
} catch ( err ) {
console.log ( err.message );
}
Of course, none of this really remotely helps when you’re trying to figure out why a style isn’t working in your HTML code, or why something isn’t displaying correctly. Thankfully, for WebKit browsers, you have another tool!
Introducing Weinre
Short for WEb INspector REmote, Wienre lets you use a WebKit-like inspector to look at the document structure in your app. You can also look at and execute statements on the console, so you can also try various things out in your app to see what is causing a failure.
Weinre is easy to download and install (available at http://people.apache.org/~pmuellr/weinre/), but if you don’t want to go to that trouble, you can also use http://debug.phonegap.com. When you install locally, you’ll end up using a script from your computer to handle communication between weinre and your app, but if you use http://debug.phonegap.com, you’ll use a script downloaded from PhoneGap.
When using http://debug.phonegap.com, you need to pick an identifier first — otherwise you might end up conflicting with another debug session. Then copy and paste the script line into your app’s index.html files. One problem (and this is true whether or not you’ve downloaded weinre or not) is that you will have to add the address to your app’s whitelist. For WP7 (as of 1.8.1), there isn’t a whitelist, but both iOS and Android have one. For ease, just add “*” (all hosts) to the list.
Then start your app and click the link provided. After a few moments, the inspector should appear. At this point you can use it just like you would in Chrome or Safari, save for the fact that Weinre doesn’t expose one important piece of the puzzle: the debugger.
This means breakpoints and watch variables are out of the question, so console.log() isn’t eliminated entirely. But the benefits of Weinre far outweigh the downsides — namely that you have access to the JavaScript console. This console will usually log any errors typically logged in a regular console, which means JavaScript errors will show up here without you having to do anything special. This can be really handy as it cuts down on the logging you have to implement.
Another Option for iOS
If you are debugging on the iOS Simulator, there’s another option that’s even better than Weinre. It turns out that the simulator exposes Mobile Safari’s web inspector and so you can access this in several different ways. One way I like to use is to use iWebInspector, a free download for your Mac. You can get it at http://www.iwebinspector.com/.
Once installed and started, you should start your app on the simulator (which iWebInspector can do for you). You can build and deploy it using Xcode as well, but while Xcode is debugging the app, you can’t use iWebInspector. (The reason why is beyond me). So if you’re using Xcode, just stop the app immediately and relaunch it from the Springboard.
Then type the name of the app /exactly/ as specified in the bundle. If your bundle is com.phonegap.mcrooster, type “mcrooster”. Then press “load”. After a second or so (assuming xcode isn’t running), you should have a typical web inspector view, complete with debugging and all.
What about other platforms?
So far all of the debugging we’ve done (save for logging to the console) only applies to WebKit engines. Weinre doesn’t do anything for non- WebKit browsers, and iWebInspector only applies to iOS (and only in the simulator, at that).
Here’s the horrible truth: there’s very few things out there to help debug WP7. For one, the browser engine is Trident, not WebKit, and so none of the above options will work. One thing to do is to wrap things in try…catch blocks and log the error messages. And get ready for something even more horrifying: at least on my install, the console messages aren’t even rendered in order — which can send you on all sorts of goose chases while trying to figure out the order your code is executing in. But, there is a little hope!
SpotNeedle
SpotNeedle works on WebKit platforms and the Trident engine. It’s not a fully-fledged debugger – it’s not even remotely as functional as Weinre. What it does do, however, is act as a JavaScript Console – that is, you can see whatever is logged to the console (and, unlike the log in Visual Studio on my system, the console shows them in order). This also means that you can execute arbitrary JavaScript in your app while it is running. That changes everything.
No, it won’t replace a debugger, but you can query the contents of variables, check up on the contents of the DOM, and even drop in code and have it run on-the-fly, on-the-device. Since there’s nothing better out there for WP7, SpotNeedle really is a life-saver.
There is another good thing about WP7.5 (aside from lacking touch events and doing funny things with XHR) – the JavaScript engine is actually pretty good. Which means once you get past some of the twitchy details, chances are good you’ll be able to debug it on Chrome. And if you’re targeting iOS or Android as well, chances are you’ve already debugged most of your script. It’s just the WP7-specific stuff that’s going to be a bit painful.
Wrapping Up
It’s inevitable that you’ll run into a situation specific to PhoneGap that you might not be able to solve. If you do, don’t be afraid to ask the fine people over at the Google Group for PhoneGap. Be sure to post all the relevant details (platform, error encountered, some code that generates the error) and you’ll likely have someone come by who can help.
Hopefully these tips and the example app have been helpful. Now it’s time for you to get digging into the internals of PhoneGap and really use it to its full capacity. There’s a lot of amazing stuff in there, and it’s waiting for your skill to take advantage of it!
Safari Books Online has the content you need
Check out these Phonegap books available from Safari Books Online:
 |
20 Recipes for Programming PhoneGap explores many common features of mobile development and how they are accomplished with PhoneGap. This will include GPS location, maps, media, accelerometer, and much more. PhoneGap is a library that allows developers to interface directly with a mobile device through the use of its Javascript libraries. With the multitude of mobile platforms it is very difficult and expensive to create multiple applications in Java, Objective-C, or other native languages. Through the PhoneGap library, most web developers can convert their existing knowledge of HTML, CSS, and Javascript into mobile phone applications with very little effort. |
 |
PhoneGap Beginner’s Guide shows you how to use the PhoneGap mobile development framework to target multiple mobile platforms: iOS, Android, BlackBerry, and more with a single application. With PhoneGap, you can use existing web development skills, instead of learning a new environment for every platform on the market. |
 |
Using HTML, CSS, and Javascript, PhoneGap allows you to jump into the mobile world and develop apps for iPhone, Android, and the BlackBerry, and Beginning PhoneGap will help show you how to best take advantage of PhoneGap. |
 |
Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5 is a definitive, one-of-a-kind book that teaches the fundamentals and strategies behind cross-platform mobile application development. Instead of learning languages like Objective-C, focus on building apps from day one for Android, iOS, Blackberry, WebOS and Symbian—without the complexities of these platforms. |
 |
Head First Mobile Web shows how to use the web tech- nology you’re already familiar with to make sites and apps that work on any device of any size. Put your JavaScript, CSS media query, and HTML5 skills to work, and then optimize your site to perform its best in the demanding mobile market. |
 |
Build Mobile Websites and Apps for Smart Devices provides practical, up to date information on all aspects of Mobile Web Development, using an easy to follow, tutorial style, with step-by-step instructions and clear examples. |
About this author
 |
Kerri Shotts has been programming since she learned BASIC on her Commodore 64. She earned her degree in Computer Science and has worked as a Test Engineer and Database Administrator. Now a Technology Consultant, she helps her clients with custom websites, apps (desktop and mobile), and more. When not at the computer, she enjoys photography and taking care of her aquariums. |
Comments are closed.