Embedded Layout Inspector | Jetpack Compose Tips

PARIS HSU: Hi, Compose developers. Today, let's dive deep into a delightful tool that I hope will become your best friend for debugging Jetpack Compose UIs, the Embedded Layout Inspector.

PARIS HSU : Salut les développeurs Compose. Aujourd'hui, plongeons dans un outil super utile qui, je l'espère, deviendra ton meilleur ami pour déboguer les interfaces Jetpack Compose : l'Embedded Layout Inspector.

[MUSIC PLAYING]

[MUSIC PLAYING]

Let's start with how to access it. First, run your app on an emulator or a physical device.

Commençons par comment y accéder. D'abord, lance ton appli sur un émulateur ou un appareil physique.

Then, open the running device tool window in Android Studio.

Ensuite, ouvre la fenêtre de l'outil d'appareil en cours d'exécution dans Android Studio.

You'll see your connected device and your running app process in the toolbar.

Tu verras ton appareil connecté et le processus de ton appli en cours dans la barre d'outils.

Look for the Toggle Layout Inspector icon.

Cherche l'icône Toggle Layout Inspector.

Click on it. The Layout Inspector window will appear below the device with two subpanels-- a component tree, which shows your component hierarchy, and attribute panel, which shows the selected component's attributes.

Clique dessus. La fenêtre du Layout Inspector apparaîtra sous l'appareil avec deux sous-panneaux : un arbre de composants, qui montre ta hiérarchie de composants, et un panneau d'attributs, qui montre les attributs du composant sélectionné.

One of the first things you may notice is speed, with up to 50% faster rendering compared to the old standalone Layout Inspector.

L'une des premières choses que tu remarqueras, c'est la vitesse, avec un rendu jusqu'à 50 % plus rapide comparé à l'ancien Layout Inspector standalone.

You will also notice the debug bounds are now drawn directly in the app UI.

Tu remarqueras aussi que les limites de débogage sont maintenant dessinées directement dans l'interface de l'appli.

I like to use the gear icon to change my layout so that the two panels split between the phone, like so.

J'aime utiliser l'icône d'engrenage pour changer ma disposition afin que les deux panneaux se répartissent autour du téléphone, comme ça.