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
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        WebView ob = new WebView(this);
        WebView.setWebContentsDebuggingEnabled(true);
        ob.getSettings().setJavaScriptEnabled(true);
        ob.loadUrl("file:///android_asset/demo.html");
        setContentView(ob);
    }
}

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <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"/>
    </form>
    <script>
        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;
        }
    </script>
</body>
</html>

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 *