Android Studio の Layout Inspector を使用すると、エミュレータまたは実機で実行中のアプリ内のレイアウトを検査してデバッグできます。各コンポーネントの属性を検査したり、アプリのレイアウトとデザイン モックアップを比較したり、アプリを拡大表示したりできます。
また、Layout Inspector では、コンポーザブルが再コンポーズまたはスキップされる頻度を確認できるため、アプリに関する問題の特定に役立ちます。たとえば、コーディング エラーによって UI が過度に再コンポーズされ、結果としてパフォーマンスの低下につながる場合があります。また、コーディング エラーによって UI が再コンポーズできなくなり、UI の変更が画面に表示されないことがあります。
詳しくは、Compose UI をデバッグするをご覧ください。
始める
Layout Inspector を起動するには、アプリを実行して
[Running Devices] ウィンドウに移動し、[Toggle Layout Inspector] 
をクリックします。複数のデバイスやプロジェクトの間で切り替えを行うと、Layout Inspector は、接続されたデバイスのフォアグラウンドで実行されているデバッグ可能なプロセスに自動的に接続します。
一般的なタスクを行う方法は次のとおりです。
- ビュー階層を表示して、各コンポーネントの属性を検査するには、[Component Tree] と [Attributes] ツール ウィンドウを使用します。Layout Inspector で属性にアクセスするには、アクティビティの再起動が必要になる場合があります。
- コンポーネントを選択するには、まず [Toggle Deep Inspect]
を有効にしてから、
コンポーネントをクリックします。または、コンポーネントをダブルクリックしてコードに移動します。 - アプリを操作するには、[Toggle Deep Inspect] を無効にします。
- 実機を検査するには、デバイスのミラーリングを有効にします。
- アプリの UI を更新する際にライブ アップデートを有効にするには、 ライブ編集が有効になっていることを確認します。
コンポーネントを選択または分離する
コンポーネントは通常、ユーザーが閲覧でき、操作できるものを表示します。[Component Tree] には、アプリの階層と各コンポーザブル コンポーネントがリアルタイムで表示されます。アプリ内の要素とそれに関連する値を可視化できるため、アプリのレイアウトをデバッグする際に便利です。
コンポーネントを選択するには、[Component Tree] または [Layout Display] でそのコンポーネントをクリックします。選択したコンポーネントのすべてのレイアウト属性が [Attributes] パネルに表示されます。
レイアウトに重複するコンポーネントが含まれている場合は、領域内のすべてのコンポーネント
が [Deep Inspect] モード で右クリックすると表示されます。前面にないコンポーネントを選択するには、[Component Tree] 内で、目的のコンポーネントをクリックします。
複雑なレイアウトの場合には、個々のコンポーネントを分離し、レイアウトのサブセットのみ [Component Tree] に表示して、[Layout Display] にレンダリングできます。コンポーネントを分離するには、[Component Tree] で該当コンポーネントを右クリックし、[Show Only Subtree] または [Show Only Parents] を選択します。全体表示に戻るには、そのコンポーネントを右クリックして [Show All] を選択します。
レイアウト境界とビューラベルを非表示にする
レイアウト要素の境界ボックスとコンポーネント ラベルを非表示にするには、[Layout Display] の上にある [View Options] 
をクリックし、[Show Borders] または [Show View Label] を切り替えます。
レイアウト階層のスナップショットをキャプチャする
Layout Inspector を使用すると、実行中のアプリのレイアウト階層のスナップショットを保存できるので、他のユーザーと共有したり、後で参照したりできます。
スナップショットには、Layout Inspector の使用時に通常表示されるデータがキャプチャされます。たとえば、レイアウトの詳細なレンダリングや、Compose レイアウト、View レイアウト、ハイブリッド レイアウトのコンポーネント ツリー、UI の各コンポーネントの詳細な属性などです。スナップショットを保存するには、[Snapshot Export/Import] 
をクリックし、
[Export Snapshot] をクリックします。
以前に保存した Layout Inspector のスナップショットを読み込むには、[Import Snapshot] をクリックします。
アプリ レイアウトと参照イメージ オーバーレイを比較する
アプリ レイアウトと UI モックアップなどの参照画像を比較するには、Layout Inspector でビットマップ イメージ オーバーレイを読み込みます。
- オーバーレイを読み込むには、[Load Overlay]
オプションを [Layout Inspector]ツールバーから選択します。オーバーレイはレイアウトに合わせて拡大または縮小されます。 - オーバーレイの透明度を調整するには、[Overlay Alpha] スライダーを使用します。
- オーバーレイを削除するには、[Clear Overlay] をクリックします。
スタンドアロンの Layout Inspector
最適なパフォーマンスを得るには、デフォルトの埋め込みモードで Layout Inspector を使用することをおすすめします。Layout Inspector を埋め込み解除するには、[File]（macOS の場合は [Android Studio]）> [Settings] > [Tools] > [Layout Inspector] に移動し、[Enable embedded Layout Inspector] チェックボックスをオフにします。
スタンドアロン モードでライブ アップデートを有効にするには、[Live Updates]
オプションを
[Layout Inspector] ツールバーからクリックします。