31 October 2011
Before starting this tutorial:
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)
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.
navigator.notification.alert("PhoneGap is working");
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?
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.
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:
YOURGUIDwith whatever you chose for a guid:
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:
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.