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: 안녕하세요, Compose 개발자 여러분. 오늘은 Jetpack Compose UI 디버깅의 가장 좋은 친구가 되어 줄 훌륭한 도구인 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.

접근 방법부터 시작할게요. 먼저, 에뮬레이터나 실제 기기에서 앱을 실행하세요.

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

그런 다음 Android Studio에서 실행 중인 기기 도구 창을 여세요.

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

도구 모음에서 연결된 기기와 실행 중인 앱 프로세스를 볼 수 있어요.

Look for the Toggle Layout Inspector icon.

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.

클릭하세요. 기기 아래에 Layout Inspector 창이 나타나며 두 개의 하위 패널이 있어요. 컴포넌트 계층 구조를 보여주는 컴포넌트 트리와 선택한 컴포넌트의 속성을 보여주는 속성 패널이에요.

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

가장 먼저 느낄 수 있는 것 중 하나가 속도예요. 이전 독립형 Layout Inspector에 비해 최대 50% 빠른 렌더링이에요.

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

디버그 바운드가 이제 앱 UI에 직접 그려지는 것도 알 수 있을 거예요.

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

저는 기어 아이콘을 사용해서 두 패널이 폰 사이에 나뉘도록 레이아웃을 변경하는 것을 좋아해요. 이렇게요.