Remote debugging a Hybrid Mobile Application running on Device

Have you faced any issues with your Mobile Application when running from Device?

When we are developing a Hybrid Mobile Application (ex: Telerik Platform - Cordova Hybrid App) we first test that application in browser’s simulator and make sure everything works as expected before deploying the application to targeted Mobile devices (like Phones and Tablets). If something gone wrong while developing the application, we can debug the application using browser’s in built debugging capabilities (mostly all browsers like Chrome, Mozilla, IE11 and Safari have in-built debugging capability). What happens if the application not working as expected after deploying to Mobile device and How to debug such Hybrid applications?

We can debug such Hybrid Applications remotely using weinre (Web Inspector Remote).

Before going to how to debug a Mobile Application using weinre, we have to install weinre in our machine. Weinre can run on any machine where node.js is installed. 

Below are the steps to install weinre:

1    Install node.js (you can install from the following location : https://nodejs.org/en/download).

Before proceeding further you can check node.js is installed properly or not using the following command in command prompt:

2    Once node.js in installed you can install weinre using npm (Node Package Manager) with the following command:

npm -g install weinre      (-g is specified to install weinre globally)

Once the installation completes, we have to run the debug server on some HTTP port. Before going further first let’s understand what are all the components weinre is composed of. Weinre is composed of three components mainly: one debug server, one debug client and debug target(s).

Debug Server: This is a HTTP Server that comes along with weinre installation

Debug Client: Any browser client where we can see the Web console of our application

Debug Target: When we run a Mobile/Web Application, the target devices console will be shown in Debug Client.

Both Debug client and Debug Target communicate with Debug Server via HTTP.

Let’s run the weinre from command prompt as shown below:

When --boundHost is not specified, by default weinre runs on localhost. Since we are planning to debug a Mobile Application with some services running on host, we have to specify the hostname/IP with --boundHost option. Default port on which Debug server runs is 8080, we can change this port number using --httpPort option.

Now we have started the Debug Server and it ready to listen any requests coming on the specified port. Now we have to include the following script tag in our Mobile Application code, before we build the Mobile App. (i.e., before generating .apk, .ipa).

<script src="http://<host>:<httpPort>/target/target-script-min.js"></script>

In the below screenshot I have added the above script just after the cordova.js script in index.html page, so this gets loaded when ever we start the application.

After adding the above line of code, save the file and then build the respective artifact and then install it in the device. If you are using Telerik Platform (https://platfor.telerik.com) to develop Mobile Applications and your application is already installed in the device, you no need to build and install it again. You can sync the application by three finger tap and hold, which will get the updated sources from Telerik Platform.

Now we have Debug Server is running and Debug Target is ready, so just launch the Debug client from the browser with the following address:

Since we didn’t open the Mobile App from device, Targets are showing as zero. Now launch the Mobile App from device and observe that a URL is shown under Target with green color (green means active target)

You can observe that, Debug client have all the options (Elements, Resources, Network, Timeline and Console) which are necessary to debug an appliation. These options are similar to the one’s which we see in Web Browser’s debug console.

Below is the screenshot from series of Network calls takes place when I login into a Mobile Application with JSDO functionality.

Similarly we can debug for rest of the resources using Elements tab, Resources tab, Timeline and Console. For more information on this interface, refer to the folloing link: http://people.apache.org/~pmuellr/weinre/docs/latest/UserInterface.html