Debugowanie za pomocą dzienników konsoli JavaScript

Ten dokument opisuje różne metody wyświetlania logów konsoli JavaScript w celu debugowania treści w WebView.

Dostęp do konsoli JavaScript umożliwia wyświetlanie błędów, ostrzeżeń i niestandardowych komunikatów z instrukcji console.log() w JavaScript, co pozwala diagnozować, co dzieje się w WebView. Istnieją 3 różne sposoby wyświetlania komunikatów konsoli JavaScript generowanych przez WebView:

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

  • Aplikacja WebView DevTools: użyj aplikacji WebView DevTools, aby włączyć na urządzeniu flagę webview-log-js-console-messages i wyświetlać logi konsoli w Logcat.

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

Jeśli udostępniasz treści z lokalnego serwera WWW na komputerze używanym do programowania, przeczytaj artykuł Dostęp do lokalnego serwera deweloperskiego z WebView, aby dowiedzieć się, jak połączyć się z nim z urządzenia lub emulatora.

Przechwytywanie wiadomości za pomocą onConsoleMessage()

Interfejsy API konsoli są obsługiwane podczas debugowania WebView. Aby komunikaty konsoli pojawiały się w Logcat, musisz podać a WebChromeClient, który implementuje metodę onConsoleMessage() for. Następnie zastosuj WebChromeClient do 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ści internetowej, takie jak wyświetlanie alertów JavaScript, zmienianie tytułu strony internetowej i obsługiwanie wiadomości wysyłanych do konsoli przeglądarki.

Poniższy kod konfiguruje WebChromeClient tak, aby przechwytywał dane wyjściowe konsoli JavaScript i przekierowywał je do Logcat w celu łatwiejszego debugowania.

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

Dzięki użyciu onConsoleMessage() Twoja niestandardowa logika logowania staje się głównym modułem obsługi błędów JavaScript, 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 dostarczanego komunikatu konsoli. Możesz wysłać zapytanie o poziom komunikatu za pomocą messageLevel(), aby określić jego ważność, a następnie użyć odpowiedniej metody Log lub podjąć inne odpowiednie działania.

Gdy wykonasz metodę konsoli na stronie internetowej, Android wywoła metodę onConsoleMessage(ConsoleMessage), aby umożliwić Ci zgłoszenie błędu. Na przykład w przypadku przykładowego kodu zostanie wydrukowany komunikat Logcat, który wygląda tak:

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