Debugging web apps

You can debug your JavaScript using the console JavaScript APIs and view the output messages to logcat. If you're familiar with debugging web pages with Firebug or Web Inspector, then you're probably familiar with using console (such as console.log()). Android's WebKit framework supports most of the same APIs, so you can receive logs from your web page when debugging in your WebView. This topic describes how to use the console APIs for debugging.

Using console APIs in WebView

All the console APIs shown in the previous section are also supported when debugging in WebView. You must provide a WebChromeClient that implements the onConsoleMessage() method in order for console messages to appear in logcat. Then, apply the WebChromeClient to your WebView with setWebChromeClient().

The following shows how to use console APIs in WebView:

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webChromeClient = object : WebChromeClient() {

    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        Log.d("MyApplication", "${message.message()} -- From line " +
              "${message.lineNumber()} of ${message.sourceId()}")
        return true
    }
}

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        return true;
    }
});

The ConsoleMessage also includes a MessageLevel object to indicate the type of console message being delivered. You can query the message level with messageLevel() to determine the severity of the message, then use the appropriate Log method or take other appropriate actions.

Whether you're using onConsoleMessage(String, int, String) or onConsoleMessage(ConsoleMessage), when you execute a console method in your web page, Android calls the appropriate onConsoleMessage() method so you can report the error. For instance, with the example code above, a logcat message is printed that looks like this:

Hello World -- From line 82 of http://www.example.com/hello.html

Logcat

Logcat is a tool that dumps a log of system messages. The messages include a stack trace when the device throws an error, as well as log messages written from your application and those written using JavaScript console APIs.

To run logcat and view messages from Android Studio, select View > Tool Windows > Logcat.

For more information, see Write and view logs with logcat.

The following are some additional resources related to debugging:

• Remote debugging on Android
• Debug your app

Testing experimental web features

Similar to Google Chrome's chrome://flags page, you can also test experimental web features in WebView.

To do this, do the following:

1. Install one of WebView's pre-release channels (beta, dev, or canary).

2. Switch your WebView channel on your test device to the installed pre-release channel.

3. Click on the WebView DevTools Launcher.

   
   Figure 1. WebView DevTools icon for app installed on a device.

4. From DevTools, click on Flags and search for any experimental features you'd like to enable or disable. The change applies to all WebViews on the device.

5. Stop and restart your app to start testing with the new features.

For more information about toggling flags, see the WebView DevTools documentation.