L'outil d'inspection de la mise en page d'Android Studio vous permet d'inspecter et de déboguer la mise en page dans une application en cours d'exécution dans un émulateur ou sur un appareil physique. Vous pouvez inspecter les attributs de chaque composant, comparer la mise en page de votre application avec des maquettes et afficher une vue agrandie de votre application.
Vous pouvez également 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.
Pour en savoir plus, consultez Déboguer votre interface utilisateur Compose.
Premiers pas
Pour démarrer 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) 
. 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é.
Voici comment effectuer certaines tâches courantes :
- Pour afficher la hiérarchie des vues et inspecter les attributs de chaque composant, utilisez les fenêtres d'outil 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 sélectionner des composants, activez d'abord l'option Toggle Deep Inspect
(Activer/Désactiver l'inspection approfondie), puis cliquez sur les
composants. Vous pouvez également accéder à votre code en double-cliquant sur les composants. - Pour interagir avec l'application, désactivez l'option Toggle Deep Inspect (Activer/Désactiver l'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'interface utilisateur de votre application, vérifiez que Modification en temps réel est activée.
Sélectionner ou isoler un composant
Un composant 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 composable. 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 un composant, cliquez dessus dans l'arborescence des composants ou le rendu de la mise en page. Tous les attributs de mise en page pour le composant sélectionné apparaissent dans le panneau Attributs.
Si votre mise en page inclut des composants qui se chevauchent, vous pouvez voir tous les composants
d'une région lorsque vous effectuez un clic droit en mode Deep Inspect . Pour sélectionner un composant qui n'est pas au premier plan, cliquez dessus dans l'arborescence des composants.
Pour travailler sur des mises en page complexes, vous pouvez isoler des composants individuels 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 un composant, effectuez un clic droit sur celui-ci 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 à la vue complète, effectuez un clic droit sur le composant et sélectionnez Show All (Tout afficher).
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 
en
haut du rendu de la mise en page , puis activez l'option Afficher les bordures ou 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 détaillé de votre mise en page, l'arborescence des composants de votre mise en page Compose, View ou hybride, ainsi que des attributs détaillés pour chaque composant de votre interface utilisateur. Pour enregistrer un instantané, cliquez sur Snapshot Export/Import 
puis sur
Export Snapshot.
Chargez un instantané de l'outil d'inspection de la mise en page précédemment enregistré en cliquant sur Import Snapshot (Importer l'instantané).
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
dans la barre d'outils de l'outil d'inspection de la mise en page. La superposition est mise à l'échelle pour s'adapter à la mise en page. - Pour régler la transparence de la superposition, utilisez le curseur Overlay Alpha (Superposition alpha).
- Pour supprimer la superposition, cliquez sur Clear Overlay.
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 à File (Fichier) (Android Studio sous macOS) > Settings (Paramètres) > Tools (Outils) > Layout Inspector (Outil d'inspection de la mise en page), puis décochez la case Enable embedded Layout Inspector (Activer l'outil d'inspection de la mise en page intégré).
En mode autonome, activez les mises à jour en temps réel en cliquant sur l'option Live Updates
dans la barre d'outils de l'outil d'inspection de la mise en page.