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.

パリス・スー：こんにちは、Compose開発者の皆さん。今日は、Jetpack ComposeのUIデバッグのための最高のツールとなるであろう、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.

次に、Android Studioで実行中のデバイスツールウィンドウを開きます。

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

ツールバーに接続されたデバイスと実行中のアプリプロセスが表示されます。

Look for the Toggle Layout Inspector icon.

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ウィンドウが表示され、2つのサブパネルがあります。コンポーネント階層を表示するコンポーネントツリーと、選択したコンポーネントの属性を表示する属性パネルです。

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.

ギアアイコンを使ってレイアウトを変更し、2つのパネルを電話の周りに分割するのが好きです。このように。