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: Ola, desenvolvedores Compose. Hoje, vamos mergulhar fundo em uma ferramenta incrivel que espero que se torne sua melhor amiga para depurar interfaces Jetpack Compose, o Layout Inspector Integrado.

[MUSIC PLAYING]

[MUSICA TOCANDO]

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

Vamos comecar com como acessa-lo. Primeiro, execute seu app em um emulador ou dispositivo fisico.

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

Depois, abra a janela de ferramentas do dispositivo em execucao no Android Studio.

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

Voce vera seu dispositivo conectado e o processo do seu app em execucao na barra de ferramentas.

Look for the Toggle Layout Inspector icon.

Procure o icone de alternar o 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 nele. A janela do Layout Inspector aparecera abaixo do dispositivo com dois subpaineis -- uma arvore de componentes, que mostra a hierarquia dos seus componentes, e um painel de atributos, que mostra os atributos do componente selecionado.

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

Uma das primeiras coisas que voce pode notar e a velocidade, com renderizacao ate 50% mais rapida comparada ao antigo Layout Inspector independente.

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

Voce tambem vai notar que os limites de depuracao agora sao desenhados diretamente na interface do app.

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

Eu gosto de usar o icone de engrenagem para mudar meu layout de forma que os dois paineis se dividam ao redor do telefone, assim.