Debugging HTML + JS Android Application

This is a small tutorial I wrote for my-self/and team to debug PhoneGap application on android.

Installing and starting the simulator

I used genyomtion cause it’s real fast and easy compared to the built in eclipse simulator (specially on windows), but you can use any other simulator/device instead.

  1. Go to genyomtion site and register + install the emulator (with default settings [next->next->next])
  2. After the installation open the app and add a new virtual machine
    1. Use your credentials from the previous step
    2. Choose your machine or add a new machine
    3. image
    4. This may take a while (about 200 MB)
  3. Go to eclipse and add an “update site” (help->install new software… and click on the “Add” button on the upper right side)
    1. Enter the following url http://plugins.genymotion.com/eclipse
    2. image
    3. Wait for it to install
    4. Restart the ADT
  4. Start gynomotion and start your virtual device
    1. You will be asked to setup the file path to android SDK (the one ADT eclipse uses)
  5. The next time you run/debug your android project you will see the new device listed in the devices window. Choose it and start the debug
    1. If you have any bundeling or minification to your JavaScript files / css – this is the right time to stop it so you can debug the code more easily later.

Adding the (JavaScript) debugger support

  1. Add the jsHyBugger to the app lib folder (in my case jshybugger-bundle-1.2.2_p4.jar)
    1. image
    2. Drag it to the eclipse lib folder and add it
  2. Change the Android Manifest file, under the application node, to include the JsHybugger element (more help here)

    <!– JSHybugger webview content provider –>
    <provider android:name=”org.jshybugger.DebugContentProvider” android:exported=”false” android:authorities=”jsHybugger.org” />

    <!– JSHybugger debug service –>
    <service android:name=”org.jshybugger.DebugService” android:exported=”false” android:enabled=”true”/>

  3. Make sure you add the internet permission as well to you application.
    1. Under the hood, JsHybugger works by creating a transparent proxy to all your JS calls (injecting code before and after each JS line).
  4. Change the main activity as follow (for PhoneGap 2.x, for other FW go here)
public class MainActivity extends DroidGap { 

@Override
public void onCreate(Bundle savedInstanceState) 

{
super.onCreate(savedInstanceState);
// example for local page loading
// load html page via jsHybugger content provider 
super.loadUrl("content://jsHybugger.org//file:///android_asset/www/index.html");
} 

@Override
public void init(CordovaWebView webView,
CordovaWebViewClient webViewClient, 

CordovaChromeClient webChromeClient) {
super.init(webView, webViewClient, webChromeClient); 

// attach web view to debugging service 
DebugServiceClient.attachWebView(webView, this);
}
} 

Installing the chrome extension

  1. Install ADB tools for chrome
    1. The ADB Chrome extension simplifies the process of setting up remote debugging. The ADB extension includes the Android Debug Bridge (ADB), which lets you debug the device over USB from your development machine. The extension provides the following benefits: · Includes ADB so you don’t have to install the full Android SDK. · Provides a UI for easily starting and stopping the ADB daemon, and viewing connected devices.
    2. The Chrome Web Store installation process does not work on Windows 8. If you have any trouble installing from the Chrome Web Store, see the ADB extension repo on github for details on how to download and install the extension manually.
  2. Go to the adt tool and see the devices
  3. image
  4. Click the “inspect” of the jsHyBugger link
  5. image
  6. Now you can see the sources in the new opened window by chrome
  7. You cannot see the dom (elements) tab though – just js
Developer