本文档介绍了查看 JavaScript 控制台日志以调试 WebView 内的内容的不同方法。
通过访问 JavaScript 控制台，您可以查看 JavaScript console.log() 语句中的错误、警告和自定义消息，从而诊断 WebView 中发生的情况。您可以通过以下三种不同的方式查看 WebView 生成的 JavaScript 控制台消息：
Chrome DevTools：将 WebView 连接到 Chrome DevTools。打开控制台标签页，查看 WebView JavaScript 控制台消息。
WebView 开发者工具应用：使用 WebView 开发者工具应用在设备上启用
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