Building a mobile app with PhoneGap and Dreamweaver: Debugging your app

Learn how to rapidly create mobile apps for Android and iOS, using Adobe Dreamweaver CS5.5 and PhoneGap. Building a mobile app with PhoneGap: The basics provides an introduction to PhoneGap and initial considerations; Building a mobile app with PhoneGap: Creating your first app points you to several articles that get you started, and get you using PhoneGap native API. This article covers some of the available tools and common techniques for debugging and testing your mobile app.

Your system must meet the following requirements to complete this tutorial.

Mac OS X 10.5.8 or later (x86 only)

Or

• Windows XP (32-bit), Vista (32- or 64-bit), or Windows 7 (32- or 64-bit)
• One modern desktop browser with debugging:
  • Chrome
  • Safari
  • Firefox (with Firebug installed)
  • Internet Explorer 9

The first step in ensuring your code is right is to verify that your syntax is right. Dreamweaver has built-in syntax checking to help you with this. If you make a syntax mistake while developing, Dreamweaver will notify you of the mistake (if you have Highlight Invalid Code enabled). A bar under the Document toolbar will inform you about the error and what line it is on (see Figure 1).

Note: The option to highlight invalid code in Code view is turned off by default. To turn it on, switch to Code View (View > Code) and then select View > Code View Options > Highlight Invalid Code.

When you build and emulate your application later on, keep in mind that Dreamweaver saves a log of the build and installation process in the project output folder. If your build fails, you can inspect these logs to find out what went wrong.

Alert debugging is the most common way to debug on mobile devices. When using this technique, you include a call to alert() with some information to be displayed. You can use this technique to inspect certain values or trace code execution.

You can also use alerts for simple step debugging.

When you import your project into Eclipse and Xcode, you can stop using alert() and instead switch to console.log(). This approach is similar to alert() except that it displays the message in the console window instead of in a pop-up alert in your application.

Debugging in a browser is a very common approach among web developers. If you are making a web application, why not use the great debugging tools that are built into most modern browsers?

1. To see how this works, download the sample files for this article and open index.html in Google Chrome.

You can also use Safari, Firefox (with Firebug installed), or Internet Explorer 9 for debugging, but I chose to use Chrome for this article because it comes with web inspector built in.

2. Choose View > Developer > Developer Tools or click the wrench icon at the top right and then select Tools > Developer Tools.

With the Chrome developer tools, JavaScript commands can be executed from the Console tab (see Figure 2). You can use this, for example, to select an element by id and update its color. The console will also show you if there are any JavaScript mistakes. The Elements tab shows your application's HTML. This can be very handy when dealing with various problems. The Resources tab can be used to inspect your web databases and any other resources your application is using.

Although developer tools that are built into the browser are convenient and useful to web developers, they do have a drawback when you're creating a mobile app that uses PhoneGap API calls: Browsers can't handle PhoneGap calls. PhoneGap needs to run on mobile devices. To test your app in a browser, you would have to comment out the PhoneGap API calls, or feed fake data to the calls.

If you want web inspector functionality without having to remove your PhoneGap API calls, see the next section, Using Weinre for debugging.

Weinre (short for Web Inspector Remote) is an open source debugging tool that does remote debugging. You can debug your application on your mobile devices while running Weinre on your machine from the browser. Weinre is a part of the PhoneGap project. For more details on Weinre, visit phonegap.github.com/weinre/.

The easiest way to use Weinre is to visit debug.phonegap.com and follow the instructions:

1. Select your globally unique identifier (guid). You can select anything you want, but make it unique.
2. Paste the following code into your index.html, replacing YOURGUID with whatever you chose for a guid:

3. Build your application and launch it on a device connected to your network.
4. Click the link that debug.phonegap.com provides you to start debugging.

If Weinre cannot locate your device, make sure the device and your computer are connected to the same network and click Refresh in your browser.

Now that you know more about how to debug your mobile app, you're ready to work on creating your own app. Once you have finished building and debugging it, learn how to deploy a mobile app with PhoneGap and Dreamweaver by reading the following articles:

• Creating a release build for Android
• Submitting to Android Market
• Creating a release build for iOS
• Submitting to the Apple App Store