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.

[MUSIC PLAYING]

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

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

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

Look for the Toggle Layout Inspector icon.

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.

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

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

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