Déboguer votre mise en page avec l'outil d'inspection de la mise en page

L'outil d'inspection de la mise en page d'Android Studio vous permet de déboguer la mise en page de votre application en affichant une hiérarchie des vues dans laquelle vous pouvez inspecter les propriétés de chaque vue. L'outil d'inspection de la mise en page vous permet de comparer la mise en page de votre application avec des maquettes de conception, d'afficher une vue agrandie ou 3D de votre application et d'examiner les détails de sa mise en page au moment de l'exécution. Cela est particulièrement utile lorsque votre mise en page est créée au moment de l'exécution plutôt qu'en XML et que la mise en page se comporte de manière inattendue.

Pour en savoir plus sur l'éditeur de mise en page pour les vues, consultez Présentation de l'éditeur de mise en page.

Figure 1 Outil d'inspection de la mise en page intégré pour l'application Jetchat

Premiers pas

Pour lancer l'outil d'inspection de la mise en page, exécutez votre application, accédez à la fenêtre Running Devices (Appareils en cours d'exécution), puis cliquez sur Toggle Layout Inspector (Activer/Désactiver l'outil d'inspection de la mise en page) Activer/Désactiver le bouton de l'outil d'inspection de la mise en page intégré. Si vous basculez entre plusieurs appareils ou projets, l'outil d'inspection de la mise en page se connecte automatiquement aux processus débogables exécutés au premier plan de l'appareil connecté.

Pour effectuer des tâches courantes, procédez comme suit:

  • Pour afficher la hiérarchie et inspecter les propriétés de chaque vue, utilisez les fenêtres d'outils Component Tree (Arborescence des composants) et Attributes (Attributs). L'outil d'inspection de la mise en page peut nécessiter un redémarrage de l'activité pour accéder aux attributs. Pour en savoir plus, consultez Éviter les redémarrages d'activité.
  • Pour sélectionner des vues en cliquant directement dessus ou accéder au code en double-cliquant dessus, activez l'option Activer/Désactiver l'inspection approfondie Activer/Désactiver le bouton "deep inspect" (Inspection approfondie).
  • Pour interagir avec l'application, désactivez l'option Toggle Deep Inspect (Activer/Désactiver l'inspection approfondie) Activer/Désactiver le bouton "deep inspect" (Inspection approfondie).
  • Pour inspecter des appareils physiques, activez la mise en miroir d'appareils.
  • Pour activer les mises à jour en temps réel lorsque vous mettez à jour l'UI de votre application, vérifiez que la Modification en temps réel est activée.
  • Pour utiliser le mode 3D, prenez un instantané de l'outil d'inspection de la mise en page Instantané de l'outil d'inspection de la mise en page, puis cliquez sur Mode 3D Bouton 3D.

Sélectionner ou isoler une vue

Une vue montre généralement un élément avec lequel les utilisateurs peuvent interagir. L'arborescence des composants affiche la hiérarchie de votre application en temps réel de chaque composant de vue. Vous pouvez ainsi déboguer la mise en page de votre application, car vous pouvez visualiser en contexte les éléments et les valeurs associés de votre application.

Pour sélectionner une vue, cliquez dessus dans l'arborescence des composants ou le rendu de la mise en page. Tous les attributs de mise en page pour la vue sélectionnée apparaissent dans le panneau Attributs.

Si votre mise en page comprend des vues qui se chevauchent, vous pouvez voir toutes les vues d'une région en effectuant un clic droit en mode Inspection approfondie Activer/Désactiver le bouton "deep inspect" (Inspection approfondie). Pour sélectionner une vue qui ne se trouve pas au premier plan, cliquez dessus dans l'arborescence des composants ou faites pivoter la mise en page.

Pour travailler sur des mises en page complexes, vous pouvez isoler des vues individuelles de sorte que seul un sous-ensemble de la mise en page s'affiche dans l'arborescence des composants et s'affiche dans le rendu de la mise en page. Pour isoler une vue, prenez un instantané Instantané de l'outil d'inspection de la mise en page, effectuez un clic droit sur la vue dans l'arborescence des composants, puis sélectionnez Show Only Subtree (Afficher uniquement les sous-arborescences) ou Show Only Parents (Afficher uniquement les parents). Pour revenir à l'affichage complet, effectuez un clic droit sur l'affichage, puis sélectionnez Show All (Tout afficher). Vous devez prendre un instantané avant d'isoler une vue.

Masquer les bordures de mise en page et afficher les libellés

Pour masquer le cadre de délimitation ou afficher les libellés d'un élément de mise en page, cliquez sur View Options (Options d'affichage) Bouton Options d'affichage en haut du rendu de la mise en page, puis activez l'option Show Borders (Afficher les bordures) ou Show View Label (Afficher le libellé de la vue).

Capturer des instantanés de la hiérarchie des mises en page

L'outil d'inspection de la mise en page vous permet d'enregistrer des instantanés de la hiérarchie de mise en page de votre application en cours d'exécution. Vous pouvez ainsi les partager avec d'autres utilisateurs ou vous y référer ultérieurement.

Les instantanés capturent les données que vous voyez généralement lorsque vous utilisez l'outil d'inspection de la mise en page, y compris un rendu 3D détaillé de votre mise en page, l'arborescence des composants de votre mise en page View, Compose ou hybride, ainsi que des attributs détaillés pour chaque composant de votre interface utilisateur. Pour enregistrer un instantané, cliquez sur Exporter/Importer des instantanés Exportation/Importation d'instantanés, puis sur Exporter un instantané.

Chargez un instantané de l'outil d'inspection de la mise en page précédemment enregistré en cliquant sur Import Snapshot (Importer un instantané).

Mode 3D

L'affichage de la mise en page offre une visualisation 3D avancée de la hiérarchie des vues de votre application au moment de l'exécution. Pour utiliser cette fonctionnalité, prenez un instantané Exportation/Importation d'instantanés, cliquez sur le bouton Mode 3D Bouton 3D dans la fenêtre de l'outil d'inspection d'instantanés, puis faites-le pivoter en faisant glisser la souris.

Vue 3D de l'outil d'inspection de la mise en page
Figure 2 Vue pivotée en 3D d'une mise en page.
Vue de l'espacement des calques dans l'outil d'inspection de la mise en page
Figure 3 Pour développer ou réduire les calques de la mise en page, utilisez le curseur Layer Spacing (Espacement des calques).

Comparer la mise en page de l'application à une superposition d'image de référence

Pour comparer la mise en page de votre application avec une image de référence, telle qu'une maquette d'UI, vous pouvez charger une superposition d'image bitmap dans l'outil d'inspection de la mise en page.

  • Pour charger une superposition, sélectionnez l'option Load Overlay (Charger la superposition) dans la barre d'outils de l'outil d'inspection de la mise en page. La superposition est adaptée à la mise en page.
  • Pour régler la transparence de la superposition, utilisez le curseur Superposition alpha.
  • Pour supprimer la superposition, cliquez sur Clear Overlay (Effacer la superposition).

Inspecter Compose

L'outil d'inspection de la mise en page vous permet d'inspecter une mise en page Compose dans une application en cours d'exécution dans un émulateur ou sur un appareil physique. Vous pouvez utiliser l'outil d'inspection de la mise en page pour vérifier la fréquence à laquelle un composable est recomposé ou ignoré, ce qui peut vous aider à identifier les problèmes liés à votre application. Par exemple, certaines erreurs de codage peuvent forcer votre UI à se recomposer de manière excessive, ce qui peut nuire aux performances. Certaines erreurs de codage peuvent empêcher la recomposition de votre UI et, par conséquent, empêcher l'affichage des modifications de l'UI à l'écran.

En savoir plus sur l'outil d'inspection de la mise en page pour Compose

Éviter les redémarrages d'activité

Pour fonctionner correctement, l'outil d'inspection de la mise en page requiert l'un des paramètres généraux suivants. Si vous ne spécifiez pas de paramètre général, l'outil d'inspection de la mise en page en définit un automatiquement.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    Cette option génère des informations supplémentaires pour inspecter le processus spécifié.

  2. adb shell settings put global debug_view_attributes 1

    Cette option génère des informations supplémentaires pour l'inspection de tous les processus sur l'appareil.

La modification d'un paramètre général peut entraîner le redémarrage de l'activité. Pour éviter qu'une activité ne redémarre, vous pouvez soit modifier les paramètres d'Android Studio, soit modifier les Options pour les développeurs dans les paramètres de votre appareil.

Pour activer l'actualisation automatique dans Android Studio, ouvrez laConfiguration d'exécution/de débogage en sélectionnant Exécuter > Modifier les configurations depuis le menu. Accédez ensuite à l'onglet Divers et cochez la case Se connecter à l'outil d'inspection de la mise en page sans redémarrer l'activité sous Options de l'outil d'inspection de la mise en page.

Option de redémarrage de l&#39;activité dans les configurations d&#39;exécution
Figure 4 Activez l'actualisation automatique dans la boîte de dialogue Run/Debug Configurations (Configurations d'exécution/de débogage).

Vous pouvez également activer les options pour les développeurs de votre appareil, puis activer l'inspection des attributs de vue depuis les paramètres développeur de l'appareil.

Outil d'inspection de la mise en page autonome

Pour des performances optimales, nous vous recommandons d'utiliser l'outil d'inspection de la mise en page dans son mode intégré par défaut. Si vous souhaitez désintégrer l'outil d'inspection de la mise en page, accédez à Fichier (Android Studio sous macOS) > Paramètres > Outils > Outil d'inspection de la mise en page et décochez la case Activer l'outil d'inspection de la mise en page intégré.

En mode autonome, activez les mises à jour en direct en cliquant sur l'option Live Updates (Mises à jour en temps réel) dans la barre d'outils de l'outil d'inspection de la mise en page.