Compose UI のデバッグ用ツールは Android Studio で利用できます。
Layout Inspector
Layout Inspector を使用すると、エミュレータまたは実機で実行中のアプリ内の Compose レイアウトを検査できます。Layout Inspector では、コンポーザブルが再コンポーズまたはスキップされる頻度を確認できるため、アプリに関する問題の特定に役立ちます。たとえば、コーディング エラーによって UI が過度に再コンポーズされ、結果としてパフォーマンスの低下につながる場合があります。また、コーディング エラーによって UI が再コンポーズできなくなり、UI の変更が画面に表示されないことがあります。Layout Inspector を初めて使用する場合は、操作方法を説明したガイダンスをご覧ください。
再コンポーズ数を取得する
Compose レイアウトをデバッグするときは、UI が適切に実装されているかどうかを確認するため、コンポーザブルの再コンポーズのタイミングを把握することが重要です。たとえば、再コンポーズ回数が多すぎる場合は、アプリが必要以上の処理を行っている可能性があります。一方、コンポーネントが想定どおりに再コンポーズしていないと、予期しない動作が発生する可能性があります。
Layout Inspector は、アプリを操作したときにレイアウト階層内の個々のコンポーザブルが再コンポーズまたはスキップしたタイミングを表示します。Android Studio では、再コンポーズがハイライト表示されるため、UI 内のどこでコンポーズ可能な関数が再コンポーズするかを見つけるのに役立ちます。
図 1. Layout Inspector で再コンポーズがハイライト表示される。
ハイライト表示された部分では、Layout Inspector の画像セクションにコンポーザブルのグラデーション オーバーレイが表示されて徐々に消えます。これにより、再コンポーズ回数が最も多いコンポーザブルが UI 内のどこで見つかるかを把握できます。あるコンポーザブルの再コンポーズ回数が別のコンポーザブルより多い場合、そのコンポーザブルのグラデーション オーバーレイはより濃い色になります。Layout Inspector でコンポーザブルをダブルクリックすると、対応するコードに移動して分析できます。
[Layout Inspector] ウィンドウを開き、アプリプロセスに接続します。[Component Tree] には、レイアウト階層の横に 2 つの列が表示されます。最初の列には各ノードのコンポーズ回数が表示され、2 番目の列には各ノードのスキップ回数が表示されます。コンポーザブル ノードを選択すると、コンポーザブルのディメンションとパラメータが表示されます。ただし、インライン関数の場合、パラメータは表示されません。[Component Tree] または [Layout Display] からコンポーザブルを選択すると、[Attributes] ペインにも同様の情報が表示されます。
回数をリセットすると、アプリで特定の操作を行っているときの再コンポーズまたはスキップを把握しやすくなります。回数をリセットするには、[Component Tree] ペインの上部にある [Reset] をクリックします。
図 3. Layout Inspector でコンポーズおよびスキップ カウンタを有効にします。
Compose のセマンティクス
Compose では、セマンティクスによって、ユーザー補助サービスとテスト フレームワークが認識しやすい別の方法で UI が記述されます。Layout Inspector を使用すると、Compose レイアウト内のセマンティック情報を検査できます。
図 4. Layout Inspector を使用して表示したセマンティック情報。
Compose ノードを選択するときに、[Attributes] ペインを使用して、ノードがセマンティック情報を直接宣言しているか、子のセマンティクスを結合しているか、その両方かを確認します。宣言しているか結合しているかにかかわらず、セマンティクスを含むノードをすばやく調べるには、[Component Tree] ペインで [View options] プルダウンを選択し、[Highlight Semantics Layers] を選択します。これにより、ツリー内のセマンティクスを含むノードのみがハイライト表示され、キーボードを使用してそれらのノード間をすばやく移動できるようになります。
Compose UI チェック
Jetpack Compose でより適応性とユーザー補助機能を備えた UI を構築できるように、Android Studio の Compose プレビューには UI チェックモードが用意されています。この機能は、動画のユーザー補助検証ツールに似ています。
Compose プレビューで Compose UI チェックモードを有効にすると、Android Studio は Compose UI を自動的に監査し、UI のユーザー補助と適応性を高めるための改善案を提案します。Android Studio は、UI がさまざまな画面サイズで動作することを確認します。[問題] パネルには、検出された問題（大画面でテキストが引き伸ばされている、色のコントラストが低いなど）が表示されます。
この機能にアクセスするには、Compose Preview の UI チェックアイコンをクリックします。
UI チェックでは、さまざまな構成で UI が自動的にプレビューされ、さまざまな構成で見つかった問題がハイライト表示されます。[問題] パネルで問題をクリックすると、問題の詳細、推奨される修正方法、問題の領域をハイライト表示したレンダリングが表示されます。
