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() di JavaScript per diagnosticare cosa sta succedendo all'interno della WebView. Esistono tre modi diversi per visualizzare i messaggi della console JavaScript generati dalla WebView:

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

  • App WebView di DevTools: utilizza l'app WebView di 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 emulatore.

Intercettare i messaggi con onConsoleMessage()

Le API della console sono supportate durante il debug di una WebView. Devi fornire un WebChromeClient che implementi il metodo onConsoleMessage() affinché i messaggi della console vengano visualizzati in Logcat. Applica quindi WebChromeClient a 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 degli errori JavaScript, sostituendo il comportamento predefinito del flag webview-log-js-console-messages e consentendoti di formattare i log nel modo che preferisci.

Anche ConsoleMessage include un oggetto MessageLevel per indicare il tipo di messaggio della console che viene recapitato. Puoi eseguire una query sul livello del 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 pagina web, Android chiama il onConsoleMessage(ConsoleMessage) metodo in modo che tu possa 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