Jul 032012
 

This is the 4th part in a series of blog posts detailing using PhoneGap Build to create an Android app like the TRINUG app.  In this post, I’ll detail debugging the app.

AppHarbor
As a reminder, a PhoneGap Build compiled app is basically an HTML5 based mobile-targeted web page or site.  Before your website is compiled and installed via PhoneGap, it is helpful to view it in the browser of various mobile devices.  Viewing the site in the browser of the device you’re targeting will provide a releastic representation of the compiled app’s layout and behavior because PhoneGap utilizes the browser engine of the native device to display the app.

There are several ways to host a work-in-progress mobile website, but one of the best ways in my opinion is to use AppHarbor.  AppHarbor is designed to integrate with version control systems, compile any .NET code, run unit tests, and finally deploy the associated web application.  Although a platform-agnostic HTML5 website obviously doesn’t use .NET, AppHarbor can still be used as a free web host for your mobile website.

By creating a service hook to your GitHib repo, AppHarbor will deploy the latest code  to your free AppHarbor endpoint.  It even keeps a history of all your past deployments so you could roll back to see a previous version.  To create this service hook, first create an AppHarbor account and  application.  Once the application is created, you’ll be presented with an option to connect to your GitHub repo:

AppHarbor setup

Connecting AppHarbor to Source Control

This setup process will result in an application slug and token from AppHarbor for use in GitHub.   Next, from GitHub create a service hook via the Admin section of your repo:

GitHub service hook

GitHub Service Hook for AppHarbor

At this point you can navigate back to your AppHarbor account and it should build and deploy your website from GitHub.  You’ll see an option to go to your website from your application’s project page on AppHarbor.  You can use this to view your site on various mobile devices for initial testing.

Debugging With PhoneGap Build

Viewing your website in a browser is a good starting point, but it’s not the same as debugging the actual installed app itself.  When debugging the app, you’ll be able to test all the PhoneGap API calls that interact with your device (for instance notifications, network checks, camera, etc).  Those things aren’t available to test from AppHarbor because they rely on the API hooks to your device that PhoneGap Build provides.

Fortunately, PhoneGap Build offers some very powerful debugging tools.  But first, you’ll need to create a Debug build of your app.  To do that, go to your PhoneGap Build project and chose the ‘Edit’ button of your project.

PhoneGap Build Edit button

You’ll then be brought to a page displaying your app’s settings.  In order to allow debugging of your app, enable this option:

PhoneGap Build app settings

Once you save this option, go back to the main project page in PhoneGap Build and rebuild your app.  This will provide you with a debug-ready download which needs to be installed on to a device for debugging.  The install has to be a manual install directly from PhoneGap Build and not from the Google Play store.  Google Play doesn’t allow for apps in debug mode to be distributed.  It’s also worth noting that running an app in debug mode will cause a noticeable performance hit.

Once the debug build of your app is installed, run the app and go back to PhoneGap Build.  There will now be an option available for a Debug console:

PhoneGap Build debug button

The PhoneGap Build console looks mysteriously like the Google Chrome developer tools console.  In fact, if you are familiar with the Google Chrome developer tools, you’ll feel right at home with the debugging functionality in PhoneGap Build:

PhoneGap Build debug console

The ‘Remote’ tab lists the devices running the debug build of the app.  The rest of the tabs preform the same functionality as their counterparts in the Chrome developer tools.  At this point, you have a direct link to the app on the connected device.  For instance, selecting HTML elements in the ‘Elements’ tab will highlight those elements in the app on the device in real-time.  It’s pretty neat to see.

The official documentation for using the debug console is here.  My favorite feature is the ‘Console’ tab.  The Console tab allows you full access to the PhoneGap API on the device you’re debugging.  If I wanted to send that device a vibrate notification, I’d just need to send this in the console:

Debug Console command

PhoneGap Build Debug Console

Very powerful indeed!

As you can see, the debugging tools in PhoneGap Build are powerful and quite useful.  It’s no coincidence that they mimic those in Google Chrome’s developer tools because in the end, your app is a website at its core.

Part I: Background and Introduction
Part II: Developing the TRINUG Mobile Site
Part III: Using PhoneGap Build
Part IV: Testing and Debugging
Part V: Publishing to Google Play
Part VI: Summary

  One Response to “Creating an app with PhoneGap Build – Part 4: Testing and Debugging”

  1. Thank you so much for writing this! I’ve found it incredibly useful. the debug info particularly, but also the details of how to submit to the Play store. many thanks again.
    (By the way, the link to part 3 doesnt work on some of these posts.)

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>