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.