Déboguer à l'aide des journaux de la console JavaScript

Ce document décrit différentes méthodes permettant d'afficher les journaux de la console JavaScript pour déboguer le contenu d'une WebView.

L'accès à la console JavaScript vous permet d'afficher les erreurs, les avertissements et les messages personnalisés de vos instructions JavaScript console.log() pour diagnostiquer ce qui se passe à l'intérieur de la WebView. Il existe trois façons différentes d'afficher les messages de la console JavaScript générés par votre WebView :

  • Outils pour les développeurs Chrome : connectez votre WebView aux outils pour les développeurs Chrome. Ouvrez l'onglet Console pour afficher les messages de la console JavaScript de votre WebView.

  • Application WebView DevTools : utilisez l'application WebView DevTools pour activer le flag webview-log-js-console-messages sur votre appareil afin de consulter les journaux de la console dans Logcat.

  • Interception des messages : interceptez les messages de la console JavaScript en implémentant onConsoleMessage() dans votre WebChromeClient. Cette approche est détaillée dans la section suivante.

Si vous diffusez du contenu à partir d'un serveur Web local sur votre ordinateur de développement, consultez Accéder à un serveur de développement local depuis WebView pour savoir comment vous y connecter depuis un appareil ou un émulateur.

Intercepter les messages avec onConsoleMessage()

Les API de la console sont compatibles lors du débogage d'un WebView. Vous devez fournir un WebChromeClient qui implémente la méthode onConsoleMessage() pour que les messages de la console s'affichent dans Logcat. Appliquez ensuite le WebChromeClient à votre WebView avec setWebChromeClient().

WebChromeClient est la classe d'assistance pour WebView. Il gère les événements liés à l'UI qui se produisent dans le contenu Web, comme l'affichage d'alertes JavaScript, la modification du titre de la page Web et la gestion des messages envoyés à la console du navigateur.

Le code suivant configure un WebChromeClient pour intercepter les sorties de la console JavaScript et les rediriger vers Logcat afin de faciliter le débogage.

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

En utilisant onConsoleMessage(), votre logique de journalisation personnalisée devient le gestionnaire principal des erreurs JavaScript, remplaçant le comportement par défaut du flag webview-log-js-console-messages et vous permettant de mettre en forme les journaux comme vous le souhaitez.

ConsoleMessage inclut également un objet MessageLevel pour indiquer le type de message de console distribué. Vous pouvez interroger le niveau du message avec messageLevel() pour déterminer sa gravité, puis utiliser la méthode Log appropriée ou prendre d'autres mesures adaptées.

Lorsque vous exécutez une méthode de console sur votre page Web, Android appelle la méthode onConsoleMessage(ConsoleMessage) pour que vous puissiez signaler l'erreur. Par exemple, avec l'exemple de code, un message Logcat semblable à celui-ci est imprimé :

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