使用 JavaScript 控制台記錄進行偵錯

本文說明查看 JavaScript 控制台記錄的不同方法，以便在 WebView 中偵錯內容。

存取 JavaScript 控制台，即可查看 JavaScript console.log() 陳述式中的錯誤、警告和自訂訊息，診斷 WebView 內發生的情況。您可以透過三種方式查看 WebView 產生的 JavaScript 控制台訊息：

  • Chrome 開發人員工具：將 WebView 連線至 Chrome 開發人員工具。開啟「控制台」分頁，即可查看 WebView JavaScript 控制台訊息。

  • WebView 開發人員工具應用程式：使用 WebView 開發人員工具應用程式在裝置上啟用 webview-log-js-console-messages 標記，即可在 Logcat 中查看控制台記錄。

  • 訊息攔截：在 WebChromeClient 中實作 onConsoleMessage()，即可攔截 JavaScript 控制台訊息。下一節將詳細說明這個方法。

如果您是從開發機器上的本機網路伺服器提供內容，請參閱「從 WebView 存取本機開發伺服器」，瞭解如何從裝置或模擬器連線至該伺服器。

用 onConsoleMessage() 攔截訊息

偵錯 WebView 時，系統支援使用控制台 API。您必須提供實作 onConsoleMessage() 方法的 WebChromeClient，才能在 Logcat 中顯示控制台訊息。然後將 WebChromeClient 套用至 WebView，方法是使用 setWebChromeClient()。

WebChromeClient 是 WebView 的輔助類別。處理網頁內容中發生的 UI 相關事件，例如顯示 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