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: Hallo, Compose-Entwickler. Heute tauchen wir tief in ein wunderbares Tool ein, das hoffentlich euer bester Freund beim Debuggen von Jetpack Compose UIs wird – der 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.

Fangen wir damit an, wie man darauf zugreift. Zuerst starte deine App auf einem Emulator oder einem physischen Gerät.

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

Dann öffne das Fenster für laufende Geräte in Android Studio.

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

Du siehst dein verbundenes Gerät und deinen laufenden App-Prozess in der Toolbar.

Look for the Toggle Layout Inspector icon.

Such nach dem Toggle-Layout-Inspector-Symbol.

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.

Klick darauf. Das Layout-Inspector-Fenster erscheint unter dem Gerät mit zwei Unterpanels – einem Komponentenbaum, der deine Komponentenhierarchie zeigt, und einem Attribut-Panel, das die Attribute der ausgewählten Komponente zeigt.

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

Eines der ersten Dinge, die dir auffallen werden, ist die Geschwindigkeit – bis zu 50 % schnelleres Rendering im Vergleich zum alten eigenständigen Layout Inspector.

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

Du wirst auch bemerken, dass die Debug-Begrenzungen jetzt direkt in der App-UI gezeichnet werden.

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

Ich nutze gerne das Zahnrad-Symbol, um mein Layout zu ändern, sodass die beiden Panels sich um das Telefon herum aufteilen, so wie hier.