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.
