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: Hola, desarrolladores de Compose. Hoy vamos a sumergirnos en una herramienta encantadora que espero se convierta en tu mejor amigo para depurar UIs de Jetpack Compose, el Layout Inspector Integrado.

[MUSIC PLAYING]

[MUSIC PLAYING]

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

Comencemos con como acceder a el. Primero, ejecuta tu app en un emulador o un dispositivo fisico.

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

Luego, abre la ventana de herramientas de dispositivo en ejecucion en Android Studio.

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

Veras tu dispositivo conectado y el proceso de tu app en ejecucion en la barra de herramientas.

Look for the Toggle Layout Inspector icon.

Busca el icono de 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.

Haz clic en el. La ventana del Layout Inspector aparecera debajo del dispositivo con dos subpaneles: un arbol de componentes que muestra tu jerarquia de componentes, y un panel de atributos que muestra los atributos del componente seleccionado.

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

Una de las primeras cosas que notaras es la velocidad, con hasta un 50% de renderizado mas rapido comparado con el Layout Inspector independiente anterior.

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

Tambien notaras que los limites de depuracion ahora se dibujan directamente en la UI de la app.

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

Me gusta usar el icono de engranaje para cambiar mi layout de modo que los dos paneles se dividan alrededor del telefono, asi.