Eseguire il debug utilizzando i log della console JavaScript

Questo documento descrive diversi metodi per visualizzare i log della console JavaScript per eseguire il debug dei contenuti all'interno di una WebView.

L'accesso alla console JavaScript ti consente di visualizzare errori, avvisi e messaggi personalizzati dalle istruzioni console.log() JavaScript per diagnosticare cosa sta succedendo all'interno di WebView. Esistono tre modi diversi per visualizzare i messaggi della console JavaScript generati da WebView:

  • Chrome DevTools: collega WebView a Chrome DevTools. Apri la scheda Console per visualizzare i messaggi della console JavaScript di WebView.

  • App WebView DevTools: utilizza l'app WebView DevTools per attivare il flag webview-log-js-console-messages sul tuo dispositivo per visualizzare i log della console in Logcat.

  • Intercettazione dei messaggi: intercetta i messaggi della console JavaScript implementando onConsoleMessage() in WebChromeClient. Questo approccio è descritto in dettaglio nella sezione seguente.

Se pubblichi contenuti da un server web locale sulla tua macchina di sviluppo, consulta Accedere a un server di sviluppo locale da WebView per scoprire come connetterti da un dispositivo o un emulatore.

Intercettare i messaggi con onConsoleMessage()

Le API della console sono supportate durante il debug di un WebView. Devi fornire un WebChromeClient che implementi il metodo onConsoleMessage() per visualizzare i messaggi della console in Logcat. Poi, applica WebChromeClient al tuo WebView con setWebChromeClient().

WebChromeClient è la classe helper per WebView. Gestisce gli eventi correlati all'interfaccia utente che si verificano nei contenuti web, ad esempio la visualizzazione di avvisi JavaScript, la modifica del titolo della pagina web e la gestione dei messaggi inviati alla console del browser.

Il seguente codice configura un WebChromeClient per intercettare gli output della console JavaScript e reindirizzarli a Logcat per semplificare il debug.

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

Utilizzando onConsoleMessage(), la logica di logging personalizzata diventa il gestore principale per gli errori JavaScript, sostituendo il comportamento predefinito del flag webview-log-js-console-messages e consentendoti di formattare i log nel modo che preferisci.

ConsoleMessage include anche un oggetto MessageLevel per indicare il tipo di messaggio della console che viene inviato. Puoi eseguire query a livello di messaggio con messageLevel() per determinare la gravità del messaggio, quindi utilizzare il metodo Log appropriato o intraprendere altre azioni appropriate.

Quando esegui un metodo della console nella tua pagina web, Android chiama il metodo onConsoleMessage(ConsoleMessage) per consentirti di segnalare l'errore. Ad esempio, con il codice di esempio, viene stampato un messaggio Logcat simile al seguente:

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