Debugowanie za pomocą dzienników konsoli JavaScript

W tym dokumencie opisujemy różne metody wyświetlania dzienników konsoli JavaScriptu, które umożliwiają debugowanie treści w widoku WebView.

Dostęp do konsoli JavaScript umożliwia wyświetlanie błędów, ostrzeżeń i niestandardowych komunikatów z instrukcji JavaScript console.log(), co pozwala diagnozować, co się dzieje w obszarze WebView. Komunikaty konsoli JavaScript generowane przez WebView możesz wyświetlać na 3 sposoby:

  • Narzędzia deweloperskie w Chrome: połącz WebView z Narzędziami deweloperskimi w Chrome. Otwórz kartę Konsola, aby wyświetlić komunikaty konsoli JavaScript WebView.

  • Aplikacja WebView DevTools: użyj aplikacji WebView DevTools, aby włączyć na urządzeniu flagę webview-log-js-console-messages, która umożliwia wyświetlanie logów konsoli w Logcat.

  • Przechwytywanie wiadomości: przechwytuj komunikaty konsoli JavaScript, wdrażając onConsoleMessage() w WebChromeClient. To podejście opisujemy szczegółowo w następnej sekcji.

Jeśli udostępniasz treści z lokalnego serwera na komputerze deweloperskim, zapoznaj się z artykułem Uzyskiwanie dostępu do lokalnego serwera programistycznego z WebView, aby dowiedzieć się, jak połączyć się z nim z urządzenia lub emulatora.

Przechwytywanie wiadomości z onConsoleMessage()

Interfejsy API konsoli są obsługiwane podczas debugowania WebView. Musisz podać WebChromeClient, który implementuje metodę onConsoleMessage(), aby komunikaty konsoli pojawiały się w Logcat. Następnie nałóż WebChromeClient na WebView za pomocą setWebChromeClient().

WebChromeClient to klasa pomocnicza dla WebView. Obsługuje zdarzenia związane z interfejsem użytkownika, które występują w treściach internetowych, takie jak wyświetlanie alertów JavaScript, zmiana tytułu strony internetowej i obsługa wiadomości wysyłanych do konsoli przeglądarki.

Poniższy kod konfiguruje WebChromeClient, aby przechwytywać dane wyjściowe konsoli JavaScript i przekierowywać je do Logcat, co ułatwia debugowanie.

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

Używając onConsoleMessage(), Twoja niestandardowa logika rejestrowania staje się głównym modułem obsługi błędów JavaScriptu, zastępując domyślne działanie flagi webview-log-js-console-messages i umożliwiając formatowanie logów w dowolny sposób.

ConsoleMessage zawiera też obiekt MessageLevel, który wskazuje typ dostarczanej wiadomości w konsoli. Możesz wysłać zapytanie na poziomie wiadomości za pomocą funkcji messageLevel(), aby określić ważność wiadomości, a następnie użyć odpowiedniej metody Log lub podjąć inne odpowiednie działania.

Gdy wykonasz w stronie internetowej metodę konsoli, Android wywoła metodę onConsoleMessage(ConsoleMessage), aby umożliwić Ci zgłoszenie błędu. Na przykład w przypadku przykładowego kodu wyświetlany jest komunikat Logcat podobny do tego:

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