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

Accessing the JavaScript [console](https://developer.mozilla.org/en-US/docs/Web/API/console) lets you view errors, warnings, and custom
messages from your JavaScript [`console.log()`](https://developer.mozilla.org/en-US/docs/Web/API/console/log_static) 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](https://developer.android.com/develop/ui/views/layout/webapps/debug-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](https://developer.android.com/studio/debug/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](https://developer.android.com/develop/ui/views/layout/webapps/access-local-server) 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`](https://developer.android.com/reference/android/webkit/WebChromeClient) that implements the [`onConsoleMessage()`](https://developer.android.com/reference/android/webkit/WebChromeClient#onConsoleMessage(android.webkit.ConsoleMessage)) method for
console messages to appear in Logcat. Then, apply the `WebChromeClient` to your
`WebView` with [`setWebChromeClient()`](https://developer.android.com/reference/android/webkit/WebView#setWebChromeClient(android.webkit.WebChromeClient)).

`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.

### Kotlin

    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
        }
    }

### Java

    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`](https://developer.android.com/reference/android/webkit/ConsoleMessage) also includes a [`MessageLevel`](https://developer.android.com/reference/android/webkit/ConsoleMessage.MessageLevel) object to
indicate the type of console message being delivered. You can query the message
level with [`messageLevel()`](https://developer.android.com/reference/android/webkit/ConsoleMessage#messageLevel()) to determine the severity of the message, then
use the appropriate [`Log`](https://developer.android.com/reference/android/util/Log) method or take other appropriate actions.

When you execute a console method in your web page, Android calls the
[`onConsoleMessage(ConsoleMessage)`](https://developer.android.com/reference/android/webkit/WebChromeClient#onConsoleMessage(android.webkit.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

> [!WARNING]
> **Warning:** Don't include personally-identifiable information (PII) in console messages.