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.
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:
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:
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.
You’ll then be brought to a page displaying your app’s settings. In order to allow debugging of your app, enable this option:
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:
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:
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:
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.