使用 JavaScript 控制台日志进行调试

本文档介绍了查看 JavaScript 控制台日志以调试 WebView 内的内容的不同方法。

通过访问 JavaScript 控制台，您可以查看 JavaScript console.log() 语句中的错误、警告和自定义消息，从而诊断 WebView 中发生的情况。您可以通过以下三种不同的方式查看 WebView 生成的 JavaScript 控制台消息：

  • Chrome 开发者工具：将 WebView 连接到 Chrome 开发者工具。打开控制台标签页，查看 WebView JavaScript 控制台消息。

  • WebView DevTools 应用：使用 WebView DevTools 应用在设备上启用 webview-log-js-console-messages 标志，以便在 Logcat 中查看控制台日志。

  • 消息拦截：通过在 WebChromeClient 中实现 onConsoleMessage() 来拦截 JavaScript 控制台消息。下一部分将详细介绍此方法。

如果您要从开发机器上的本地 Web 服务器提供内容，请参阅从 WebView 访问本地开发服务器，了解如何从设备或模拟器连接到该服务器。

拦截包含 onConsoleMessage() 的消息

在调试 WebView 时，控制台 API 受支持。您必须提供实现 onConsoleMessage() 方法的 WebChromeClient，才能在 Logcat 中显示控制台消息。然后，通过 setWebChromeClient() 将 WebChromeClient 应用到 WebView。

WebChromeClient 是 WebView 的辅助类。它处理 Web 内容中发生的与界面相关的事件，例如显示 JavaScript 提醒、更改网页标题以及处理发送到浏览器控制台的消息。

以下代码配置了一个 WebChromeClient，用于拦截 JavaScript 控制台输出并将其重定向到 Logcat，以便更轻松地进行调试。

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

通过使用 onConsoleMessage()，您的自定义日志记录逻辑将成为 JavaScript 错误的主要处理程序，取代 webview-log-js-console-messages 标志的默认行为，并使您能够以所需的方式设置日志格式。

ConsoleMessage 还包含一个 MessageLevel 对象，用于表示传送的控制台消息的类型。您可以使用 messageLevel() 查询消息级别以确定消息的严重程度，然后使用适当的 Log 方法或采取其他适当操作。

在网页中执行控制台方法时，Android 会调用 onConsoleMessage(ConsoleMessage) 方法，以便您能报告错误。例如，使用示例代码，系统会显示如下所示的 Logcat 消息：

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