Déboguer à l'aide de l'application WebView DevTools

L'application WebView DevTools est un utilitaire sur l'appareil permettant de gérer et de déboguer le composant WebView du système lui-même. Il est distinct des outils pour les développeurs Chrome, qui s'exécutent sur votre machine de développement et vous permettent de déboguer à distance le contenu Web en direct (HTML, CSS et JavaScript) s'exécutant dans une instance de WebView.

WebView DevTools est une application associée qui est automatiquement installée sur votre appareil avec le composant système WebView. L'application est divisée en quatre zones :

  • Accueil : affichez les informations sur la version et remplacez la WebView par défaut par une version du canal de prépublication.
  • Plantages : liste et importez les rapports d'erreur WebView.
  • Options : définissez des options pour les développeurs afin de modifier le comportement de WebView.
  • Journaux réseau : listez et partagez les journaux réseau de bas niveau de WebView.

Exécuter les outils de développement WebView

Sur les appareils équipés d'Android 16 ou version ultérieure sur lesquels le mode développeur est activé, vous pouvez lancer les outils de développement WebView en accédant à Paramètres > Système > Options pour les développeurs > Outils de développement WebView.

Sur toutes les versions récentes d'Android, vous pouvez lancer les outils pour les développeurs WebView à l'aide d'une commande adb :

adb shell am start -a "com.android.webview.SHOW_DEV_UI"

Vous pouvez également utiliser l'icône du lanceur WebView DevTools si vous installez un canal de préversion de WebView, tel que Bêta, Dev ou Canary.

Icône de lanceur des outils de développement WebView.
Image 1. Icône des outils pour les développeurs WebView pour une application installée sur un appareil.

La première fois que vous exécutez WebView DevTools, il vous demandera l'autorisation d'envoyer des notifications afin d'afficher une notification persistante listant les indicateurs de développeur que vous activez.

Passer à un canal de prépublication

Les dernières fonctionnalités et corrections de bugs de WebView sont d'abord disponibles dans les canaux de prépublication. Vous pouvez tester votre application par rapport à ces modifications en changeant le fournisseur WebView de votre appareil à l'aide des outils pour les développeurs WebView. Effectuer des tests sur des canaux de préversion permet de s'assurer que votre application est compatible avec les prochaines versions de WebView avant leur lancement auprès des utilisateurs.

  1. Installez la version bêta, développement ou Canary de WebView, selon le compromis que vous préférez entre stabilité et accès aux dernières modifications.
  2. Ouvrez l'application WebView DevTools, puis appuyez sur Change Provider (Changer de fournisseur).
  3. Si cette option ne s'affiche pas, appuyez sur les trois points en haut à droite, puis sélectionnez Changer de fournisseur WebView.

Pour en savoir plus, consultez Essayer WebView en version bêta, de développement ou Canary.

Canaux WebView

Les versions de WebView sont basées sur les versions de Chrome. Chaque canal représente un niveau différent de stabilité et de fraîcheur du code. Voici un aperçu des cas d'utilisation de chaque canal WebView :

  • Canary : mise à jour quotidienne. Ce canal inclut les toutes dernières modifications, y compris les nouvelles fonctionnalités et les corrections de bugs, dès qu'elles sont fusionnées dans la base de code Chromium. Utilisez ce canal si vous souhaitez tester le fonctionnement de votre application Web dans une WebView avec une modification récemment fusionnée. Toutefois, sachez que ce canal peut être instable ou contenir des bugs.

  • Développement : mise à jour une ou deux fois par semaine. Cette version est plus stable que la version Canary, mais contient toujours des modifications de pointe. Il est idéal pour les développeurs qui souhaitent tester de nouvelles fonctionnalités, mais avec moins de risques de bugs non liés que Canary.

  • Bêta : mise à jour environ toutes les semaines, avec une mise à jour majeure toutes les quatre semaines. Ce canal vous permet d'obtenir un aperçu des fonctionnalités de la prochaine version stable de WebView environ quatre à six semaines avant sa sortie. Utilisez-le pour tester votre application Web avec la prochaine version de WebView afin de vérifier sa compatibilité.

  • Stable : mise à jour toutes les quatre semaines pour les versions majeures, et toutes les deux à trois semaines pour les versions mineures afin de corriger les bugs urgents. Il s'agit du canal de production de WebView, déployé pour tous les utilisateurs. Il s'agit du canal le plus stable, car il a été testé dans d'autres canaux. Utilisez cette option si vous souhaitez découvrir votre application Web dans une WebView comme le font la plupart des utilisateurs actuellement, peut-être pour reproduire un bug qu'ils ont signalé.

UI en cas de plantage

Si vous rencontrez des plantages WebView lors du développement de votre application, vous pouvez les lister, les importer et les signaler à l'aide des outils de développement WebView.

  1. Après le plantage de votre application, redémarrez-la pour vous assurer que le rapport d'erreur est généré.
  2. Ouvrez l'application WebView DevTools, puis appuyez sur Crashes (Plantages).

Pour en savoir plus, consultez la documentation sur l'UI de plantage.

UI des flags

L'application WebView DevTools vous permet de définir plusieurs indicateurs utiles pour modifier le comportement de toutes les WebViews sur votre appareil. La plupart des indicateurs ne sont utilisés que pour le développement de WebView lui-même, mais certains sont utiles aux développeurs d'applications Android.

  • highlight-all-webviews : identifie les WebView en ajoutant une teinte jaune par-dessus.
  • net-log : active la journalisation de bas niveau de l'activité réseau WebView.
  • webview-log-js-console-messages : permet d'afficher les journaux de la console JavaScript dans Logcat.
Application WebView DevTools affichant l'UI des indicateurs.
Figure 2. Interface utilisateur des options dans l'application WebView DevTools.

Pour en savoir plus, consultez la documentation sur l'UI des indicateurs.

Journaux réseau

Si vous ne parvenez pas à résoudre les problèmes de connexion au serveur dans WebView à l'aide des outils pour les développeurs Chrome, utilisez les outils pour les développeurs WebView afin de capturer les journaux réseau de bas niveau.

  1. Activez le débogage WebView dans le code de votre application.
  2. Dans les outils de développement WebView, ouvrez Flags, recherchez net-log et activez-le. Redémarrez votre application pour que l'indicateur prenne effet.
  3. Effectuez des actions qui déclenchent le comportement réseau que vous souhaitez déboguer. Une fois le problème reproduit, fermez votre application.
  4. Ouvrez la section "Journaux réseau" des outils de développement WebView pour localiser et partager le fichier de journal réseau.
  5. Vous pouvez charger le fichier journal JSON dans la visionneuse NetLog, un outil en ligne permettant de visualiser les journaux réseau, afin d'inspecter les événements réseau de bas niveau, les informations sur les sockets et les détails de timing.

Pour en savoir plus, consultez Débogage réseau dans WebView.