Debugging mit JavaScript-Konsolenprotokollen

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

Wenn Sie auf die JavaScript-Konsole zugreifen, können Sie Fehler, Warnungen und benutzerdefinierte Nachrichten aus Ihren JavaScript-console.log()-Anweisungen aufrufen, um zu ermitteln, was in der WebView passiert. Es gibt drei verschiedene Möglichkeiten, JavaScript-Konsolennachrichten aufzurufen, die von Ihrer WebView generiert werden:

  • Chrome-Entwicklertools: Verbinden Sie Ihre WebView mit den Chrome-Entwicklertools. Öffnen Sie den Tab Konsole , um die JavaScript-Konsolennachrichten Ihrer WebView aufzurufen.

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

  • Nachrichtenabfang: Fangen Sie JavaScript-Konsolennachrichten ab, indem Sie implementieren onConsoleMessage() in Ihrem WebChromeClient. Dieser Ansatz wird im folgenden Abschnitt ausführlich beschrieben.

Wenn Sie Inhalte von einem lokalen Webserver auf Ihrer Entwicklungsmaschine bereitstellen, finden Sie unter Über eine WebView auf einen lokalen Entwicklungsserver zugreifen Informationen zum Herstellen einer Verbindung von einem Gerät oder Emulator aus.

Nachrichten mit onConsoleMessage() abfangen

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

WebChromeClient ist die Hilfsklasse für die WebView. Sie 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 Konsole des Browsers 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;
    }
});

Mit onConsoleMessage() wird Ihre benutzerdefinierte Logging-Logik 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 Ihren Wünschen formatieren.

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

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

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