Debugging the mobile web, iPhone and iPad apps from your desktop

This article aims to demonstrate how to debug an Aria Templates web application being browsed from an iPhone, iPad, or another touch enabled device whilst using your desktop computer with a remote web inspector called “Weinre”.

Weinre?

Weinre was created by Patrick Mueller of IBM back in 2010 as a prototype web inspector and is now an open source project which is a part of the Apache Cordova project.  Weinre stands for WEb INspector REmote, and is a web inspector that can debug a web page running in a WebKit browser window on a different machine.  This means it can be extremely useful when debugging iPhone and iPad apps that contain HTML and CSS.

Here is an illustration of how Weinre works:

• the target – web page being debugged
• the client – web inspector code running as a web page
• the agent – HTTP server allowing the target and client to communicate

Weinre and Aria Templates

Weinre is now a part of the phone gap project, and there is now a public agent (HTTP server) available to use allowing the target and client to communicate.  It is possible to set up a separate HTTP server to act as the agent but for the purposes of this article we will be using the PhoneGap HTTP server.

Here’s how to use the PhoneGap HTTP server together with Aria Templates touch detection, and weinre to provide remote debugging for touch devices easily:

• Firstly add the following dependencies to the root module controller:

/**     * Aria Templates Example Application Root Module Controller     */     Aria.classDefinition({         $classpath : "apps.apidocs.main.AppModule",         $extends : "aria.templates.ModuleCtrl",        $implements : ["apps.apidocs.main.IAppModule"],        $dependencies : ["aria.touch.Event", "aria.utils.ScriptLoader", "aria.utils.QueryString"]

aria.touch.Event : will be used for the touch detection
aria.utils.ScriptLoader : will be used to load the weinre script
aria.utils.QueryString : will be used to extract the weinre url parameter

• Now within the root module controller init method add the the following check for touch detection and the weinre URL parameter, to know whether to inject the weinre script or not, ensuring the weinre script will only be loaded when it is actually needed:

$prototype : {         $publicInterfaceName : 'apps.apidocs.main.IAppModule',         /**         * Init method. It loads the weinre script if:         * - being browsed by a touch capable device         * - weinre url paramter has been defined         */         init : function () {             // weinre: remote web inspector             if (aria.touch.Event.touch) {                 var weinre = aria.utils.QueryString.getKeyValue("weinre");                 if (weinre) {                     // inject the weinre script                     var source = "http://debug.phonegap.com/target/target-script-min.js#guid:" + weinre;                     aria.utils.ScriptLoader.load([source]);                 }             }         }

And that’s it for the code part, now lets browse the web page on the iPhone or iPad and debug using a desktop computer.

A small demonstration…

For this demonstration we shall open a browser using an iPhone or an iPad and go to: http://ariatemplates.com/aria/guide/apps/apidocs/#aria.core.JsObject?weinre=AT1.1-28

Note: this could also be an iPhone or iPad application that is a native container for a web application, in this case you would need to append the weinre URL parameter from within the app itself and then launch the app on the device.

Then on a different machine open a web browser and go to http://debug.phonegap.com/client/#guid:AT1.1-28

You should now see the following screenshot from the desktop computer browser:

Now you can click on elements within weinre and start to traverse the dom where you will see on the iPhone or iPad these elements in the page being highlighted.

You can also inspect the CSS and change in almost real time the property values, switching styles on and off, or even edit the HTML directly. As a change is made you can watch on your iPhone or iPad your page or app update.

And as can be seen here the background color for the tree panel on the left has been changed for the browsing touch device: