Debugging mit JavaScript-Konsolenprotokollen

In diesem Dokument werden verschiedene Methoden zum Aufrufen von JavaScript-Konsolenlogs beschrieben, um Inhalte in einer WebView zu debuggen.

Über die JavaScript-Konsole können Sie Fehler, Warnungen und benutzerdefinierte Meldungen aus Ihren JavaScript-console.log()-Anweisungen aufrufen, um zu diagnostizieren, was in der WebView passiert. Es gibt drei verschiedene Möglichkeiten, von Ihrer WebView generierte JavaScript-Konsolennachrichten aufzurufen:

  • Chrome-Entwicklertools: WebView mit den Chrome-Entwicklertools verbinden Öffnen Sie den Tab Konsole, um die JavaScript-Konsolennachrichten für WebView aufzurufen.

  • WebView-Entwicklertools: Mit der WebView-Entwicklertools-App können Sie das Flag webview-log-js-console-messages auf Ihrem Gerät aktivieren, um Konsolenlogs in Logcat aufzurufen.

  • Abfangen von Nachrichten: Sie können JavaScript-Konsolennachrichten abfangen, indem Sie onConsoleMessage() in Ihrem WebChromeClient implementieren. Dieser Ansatz wird im folgenden Abschnitt ausführlich beschrieben.

Wenn Sie Inhalte von einem lokalen Webserver auf Ihrem Entwicklungscomputer bereitstellen, finden Sie unter Über WebView auf einen lokalen Entwicklungsserver zugreifen Informationen dazu, wie Sie von einem Gerät oder Emulator aus eine Verbindung zu diesem Server herstellen.

Nachrichten mit onConsoleMessage() abfangen

Die Konsolen-APIs werden beim Debuggen eines WebView unterstützt. Sie müssen ein WebChromeClient bereitstellen, das die Methode onConsoleMessage() implementiert, damit Konsolennachrichten in Logcat angezeigt werden. Wenden Sie dann WebChromeClient auf Ihre WebView mit setWebChromeClient() an.

WebChromeClient ist die Hilfsklasse für WebView. Es verarbeitet UI-bezogene Ereignisse, die im Webinhalt auftreten, z. B. das Anzeigen von JavaScript-Warnungen, das Ändern des Titels der Webseite und das Verarbeiten von Nachrichten, die an die Browserkonsole gesendet werden.

Mit dem folgenden Code wird ein WebChromeClient konfiguriert, um JavaScript-Konsolenausgaben abzufangen und zur einfacheren Fehlerbehebung an Logcat weiterzuleiten.

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

Wenn Sie onConsoleMessage() verwenden, wird Ihre benutzerdefinierte Logik zum Protokollieren zum primären Handler für JavaScript-Fehler. Das Standardverhalten des Flags webview-log-js-console-messages wird überschrieben und Sie können Logs nach Bedarf formatieren.

Das ConsoleMessage enthält auch ein MessageLevel-Objekt, um den Typ der Konsolennachricht anzugeben, die gesendet wird. Sie können die Nachrichtenebene mit messageLevel() abfragen, um den Schweregrad der Nachricht zu ermitteln. Verwenden Sie dann die entsprechende Log-Methode oder ergreifen Sie andere geeignete Maßnahmen.

Wenn Sie eine Konsolenmethode auf Ihrer Webseite ausführen, ruft Android die Methode onConsoleMessage(ConsoleMessage) auf, damit Sie den Fehler melden können. Mit dem Beispielcode wird beispielsweise eine Logcat-Meldung ausgegeben, die so aussieht:

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