Mobile Debugging

You can use the following tools and methods to debug your mobile applications.

Client-side Debugging

Log Messages

You can use console.log() during development to gather messages useful to understand the state of the application, and you will be able to see those messages on any JavaScript console.

Client-side Remote Debugging

You can debug the client-side (JavaScript) code of your mobile application from your workstation, remotely, while the application is running in a mobile device. There are several technologies to achieve this, and this page covers some of those you will find more useful when debugging your applications.

Weinre

Weinre provides a graphical interface to debug the client-side code of your mobile application.

To configure your application to use Weinre, select the main page of your application and follow these steps:

1. From the Object Inspector, open the Events tab.
2. Double-click the OnShowHeader event.
3. On the function for the event, add the following line of code: echo "<script src=\"http://debug.phonegap.com/target/target-script-min.js#code\"></script>";. Replace code with a unique code, like 16299E7F-5A88-4EB7-A690-9D688CDE536F.

Your mobile application is now configured to use Weinre. You can deploy your application, and run it on a device (either real or virtual) with access to the internet.

To access the running page from your workstation, open a web browser and go to http://debug.phonegap.com/client/#code, where code is the code you chose above.

You can now use Weinre to debug your application and run client-side code remotely.

Warning: Undo the changes to your appliaction here when deploying for a public release.

JS Console

Main page: JS Console.

JS Console simply gives you access to the client-side environment of your pages, letting you evaluate client-side code expressions and run code.

See Also

• Debugging Mobile Web Apps: Weinre and JSConsole Now, Remote WebKit Eventually, by Werner Schuster.