When developing an hybrid application for the android platform we can debug our code in JavaScript using the Chrome DevTools. In order to assist my students I chose to create a short demo for using this remote debugging capability.

The application I wrote in Java includes a simple single activity. The following is the code of this activity.

package com.lifemichael.ourdebuggingdemo;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends Activity
    protected void onCreate(Bundle savedInstanceState)
        WebView ob = new WebView(this);

The HTML document the WebView object renders includes the following code.

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <form name="myform">
        <br/>num 1: <input type="text" name="num_a"/>
        <br/>num 2: <input type="text" name="num_b"/>
        <br/><input type="button" onclick="calc()" value="+"/>
        <br/>result: <input type="text" name="result"/>
        function calc()
            var a = parseInt(document.myform.num_a.value,10);
            var b = parseInt(document.myform.num_b.value,10);
            var sum = a+b;
            document.myform.result.value = sum;

The following video clip overviews this code sample, shows its execution and the remote debugging for its code using Chrome DevTools.

Leave a Reply

Your email address will not be published. Required fields are marked *