Déboguer des applications Web

Vous pouvez déboguer votre code JavaScript à l'aide des API JavaScript console et afficher les messages de sortie dans Logcat. Si vous savez déboguer des pages Web avec Firestore ou Web Inspector, vous connaissez probablement l'utilisation de console (comme console.log()). Le framework WebKit d'Android est compatible avec la plupart des mêmes API. Vous pouvez donc recevoir les journaux de votre page Web lors du débogage dans WebView. Cet article explique comment utiliser les API de la console pour le débogage.

Utiliser les API de la console dans WebView

Les API de la console sont également prises en charge lors du débogage dans 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(). Pour en savoir plus, consultez la documentation sur Webview.

L'exemple suivant montre comment utiliser les API de la console dans WebView:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webChromeClient = object : WebChromeClient() {

    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        Log.d("MyApplication", "${message.message()} -- From line " +
              "${message.lineNumber()} of ${message.sourceId()}")
        return true
    }
}

Java

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        return true;
    }
});

Le 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 la gravité du message, puis utiliser la méthode Log appropriée ou prendre d'autres mesures appropriées.

Que vous utilisiez onConsoleMessage(String, int, String) ou onConsoleMessage(ConsoleMessage), lorsque vous exécutez une méthode de console sur votre page Web, Android appelle la méthode onConsoleMessage() appropriée pour que vous puissiez signaler l'erreur. Par exemple, avec l'exemple de code ci-dessus, un message Logcat semblable à celui-ci s'affiche:

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

Vous trouverez ci-dessous des ressources supplémentaires liées au débogage:

Tester des fonctionnalités Web expérimentales

Comme pour la page chrome://flags de Google Chrome, vous pouvez également tester des fonctionnalités Web expérimentales dans WebView.

Pour ce faire, procédez comme suit:

  1. Installez l'une des versions préliminaires de WebView (bêta, dev ou Canary){: .external}.

  2. Basculez la version WebView de votre appareil de test vers la version préliminaire installée.

  3. Cliquez sur le lanceur WebView DevTools (Outils pour les développeurs WebView) :


    Figure 1 : Icône WebView DevTools pour une application installée sur un appareil.

  4. Dans les outils de développement, cliquez sur Indicateurs et recherchez les fonctionnalités expérimentales que vous souhaitez activer ou désactiver. La modification s'applique à toutes les instances WebView de l'appareil.

  5. Arrêtez, puis redémarrez votre application pour commencer à tester les nouvelles fonctionnalités.

Pour en savoir plus sur l'activation et la désactivation des options, consultez la documentation sur les outils de développement WebView.