Debugging workflow

The desktop browser is a great tool for hybrid mobile app development. The majority of your mobile development can be previewed and debugged in your desktop browser. Because PhoneGap leverages open web standards (HTML, CSS, and JavaScript), you can start work in a desktop browser and then move on to a native project once the functionality is fleshed out. This way, it's possible to speed up our development cycles and spend more time implementing core functionality. You can use the latest versions of any of the major desktop browsers such as Internet Explorer (IE), Google Chrome, Firefox, Safari, or Opera to get started with a PhoneGap app. All of these browsers have Developer Tools for logging and debugging your code.

New developers tend to prefer WebKit-based browsers; at the time of writing, Chrome has the largest install base market share followed by Firefox and Internet Explorer.

Note

Chrome also offers a technology known as Google Packaged Apps to build native apps based on web standards. More information about it is available at https://developer.chrome.com/apps/about_apps.

As you have seen, each browser offers different debugging tools and each tool has its pros and cons. Regardless of which tool you use, however, your debugging workflow is the same.

When investigating a specific problem, you will usually follow this process:

1. Find the relevant code in the debugger's code view pane.
2. Set breakpoint(s) where you think interesting things may occur.
3. Run the script again by reloading the page in the browser if it's an inline script, or by clicking on a button if it's an event handler.
4. Wait until the debugger pauses execution and makes it possible to step through the code.
5. Investigate the values of variables. For example, look for variables that are undefined when they should contain a value, or return false when you expect them to return true.

If necessary, you can use the console to evaluate code or change variables for testing. You can also execute complex JavaScript code and test a solution before implementing it.

Identifying the problem by learning which piece of code or input caused the error conditions and isolating it is a suitable approach. However, with mobile apps, things are not always so straightforward. The advantage of PhoneGap is that you can develop and debug in a common environment such as the browser, but keep in mind that a mobile app has to be tested and debugged on the target devices as well.

Although it's not a neat way of debugging, you can use console log messages to debug. These log messages will be printed in the console of the browser development tool. A sample use of the JavaScript code is provided here for reference:

console.log("Application running now");

There are several other debugging tools for PhoneGap/Cordova. While a few of them are free services, some of them are paid services:

1. Ripple Emulator: http://emulate.phonegap.com/
2. GapDebug: https://www.genuitec.com/products/gapdebug/
3. jsHybugger: https://www.jshybugger.com/
4. Weinre: http://people.apache.org/~pmuellr/weinre-docs/latest/
5. Adobe Edge Inspect: https://creative.adobe.com/products/inspect
6. Chrome: https://developer.chrome.com/devtools/docs/remote-debugging