Debug using JavaScript console Logs

This document describes different methods for viewing JavaScript console logs to debug content within a WebView.

Accessing the JavaScript console lets you view errors, warnings, and custom messages from your JavaScript console.log() statements to diagnose what is happening inside the WebView. There are three different ways to view JavaScript console messages generated by your WebView:

• Chrome DevTools: Connect your WebView to Chrome DevTools. Open the Console tab to see your WebView JavaScript console messages.

• WebView DevTools app: Use the WebView DevTools app to enable the webview-log-js-console-messages flag on your device to view console logs in Logcat.

• Message interception: Intercept JavaScript console messages by implementing onConsoleMessage() in your WebChromeClient. This approach is detailed in the following section.

If you are serving content from a local web server on your development machine, see Access a local development server from WebView to learn how to connect to it from a device or emulator.

Intercept messages with onConsoleMessage()

The console APIs are supported when debugging a WebView. You must provide a WebChromeClient that implements the onConsoleMessage() method for console messages to appear in Logcat. Then, apply the WebChromeClient to your WebView with setWebChromeClient().

WebChromeClient is the helper class for the WebView. It handles UI-related events that happen in the web content such as, showing JavaScript alerts, changing the title of the web page, and handling messages sent to the browser's console.

The following code configures a WebChromeClient to intercept JavaScript console outputs and redirect them to Logcat for easier debugging.

val myWebView: WebView = findViewById(R.id.my_webview)
myWebView.webChromeClient = object : WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        // Log JavaScript console messages to Logcat
        Log.d("WebViewConsole", "${message.message()} -- From line ${message.lineNumber()} of ${message.sourceId()}")
        // Return true to indicate that the message has been handled
        return true
    }
}

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        // Log JavaScript console messages to Logcat
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        // Return true to indicate that the message has been handled
        return true;
    }
});

By using onConsoleMessage(), your custom logging logic becomes the primary handler for JavaScript errors, superseding the default behavior of the webview-log-js-console-messages flag, and enabling you to format logs how you want them.

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.

When you execute a console method in your web page, Android calls the onConsoleMessage(ConsoleMessage) method so you can report the error. For example, with the example code, a Logcat message is printed that looks like the following:

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