トレースを読み込んだら、[View traces] をクリックしてアップロードされたトレースを可視化します。各トレースのタブがウィンドウの上部パネルに表示されます。アップロードされたファイルに関連するトレースが含まれている場合、画面録画トレースまたはスクリーンショットのフローティング ビューが画面にオーバーレイされます。
![Winscope の [View traces]](https://source.android.google.cn/static/docs/core/graphics/images/view_traces_winscope.png?hl=ja)
図 1. Winscope の [View traces]。
以降のセクションでは、[View traces] 画面の UI 要素について説明します。
長方形
Winscope ビューの [LAYERS] パネル（WindowManager、SurfaceFlinger、ViewCapture など）には、Z 軸上の位置と順序を視覚的に表すトレースからの長方形要素が含まれています。
[LAYERS] パネルのナビゲーション コントロールを使用して、長方形のレイヤの描画モード、間隔、回転を変更できます。
図 2. 長方形のコントロール。
グラデーション形式
階層内のすべての要素をより効果的に検査するには、長方形の形式ボタンを使用して、長方形の描画形式をグラデーションに切り替えます。 グラデーション形式では、長方形の形式ボタンが薄いグレーになります。
このモードでは、各長方形の不透明度は Z オーダーに基づいて低下し、Z オーダーが高い長方形ほど半透明になります。これにより、長方形が互いに隠れないようにしながら、階層内のすべての要素を確認できます。
図 3. 長方形のグラデーション。
不透明度形式
長方形の描画形式を不透明度に変更するには、長方形の形式ボタンをクリックします。不透明度形式では、長方形の形式ボタンが濃いグレーに変わります。
このモードでは、各長方形は、不透明度（サーフェスやビューの不透明度など）に基づいて描画されます。
図 4. 長方形の不透明度。
ワイヤーフレーム形式
長方形の表示をワイヤーフレームに変更するには、長方形の形式ボタンをクリックします。この表示により、階層内の個々の要素を簡単に調べて分析できます。ワイヤーフレーム形式では、長方形の形式ボタンが、陰影のない輪郭に変わります。
図 5. 長方形のワイヤーフレーム。
回転
回転スライダーを使用して、長方形の遠近感を 0～45 度の間で変更し、要素が画面外に移動するシナリオを確認できます。
図 6. 長方形の回転。
間隔
間隔スライダーを使用してレイヤ間の間隔を調整し、フラットなビューまたは幅の広いビューを作成します。これにより、要素の Z オーダーをより適切に検査できるようになります。
図 7. 長方形の表面。
ディスプレイとウィンドウの選択
SurfaceFlinger ビューでは、複数のディスプレイを備えたデバイス上でデータを記録する場合に、メニューに利用可能なディスプレイが表示され、目的のディスプレイのみを選択できます。
ViewCapture では、複数のシステム ウィンドウ（通知シェード、タスクバー、ランチャーなど）を録画する場合に、メニューに使用可能なウィンドウが一覧表示されます。
パンとズーム
長方形の領域をクリックしてマウスをドラッグすることで、長方形の位置を水平方向または垂直方向に調整できます。ズームイン、ズームアウト、ズームレベルのリセットには、スクロール ホイールまたはコントロール バーのズームボタンを使用します。
階層
Winscope ビューアには多くの場合、階層ビューアが組み込まれています。図 1 のビューアには、分析対象のトレースに応じたさまざまな階層が表示されています。たとえば、ビューアでは WindowManager 内のウィンドウ階層や、システム UI ウィンドウ内のビュー階層を表示できます。
特定の階層タイプの詳細については、それぞれのトレースのセクションをご覧ください。
このセクションでは、[Show diff]、[Show only V]、[Flat]、[Search] の各機能を中心に、階層の一般的な使用方法について説明します。
図 8. 階層のコントロール。
Show diff
[Show diff] 機能を有効にすると、Winscope は現在の状態と以前の状態の差分を自動的にモニタリングして表示します。[Show diff] 機能では、削除された要素は赤、変更された要素は青、新しく作成された要素は緑でハイライトされます。この視覚的な表現により、2 つの状態の違いをすばやく特定して理解できるため、変更を追跡して潜在的な問題を特定しやすくなります。
![[Show diff] の階層](https://source.android.google.cn/static/docs/core/graphics/images/hierarchy_show_diff.png?hl=ja)
図 9. [Show diff] の階層。
[Search] とフィルタ
階層ビューアには、正規表現を使用した [Search] 機能が用意されています。このフィルタは、要素の名前と値（プロパティの場合）の両方を対象とします。フィルタが階層内の子要素と一致すると、ツリーのルートまでの親のチェーン全体が表示されます（次の図を参照）。
![[Search] の階層](https://source.android.google.cn/static/docs/core/graphics/images/hierarchy_search.png?hl=ja)
図 10. [Search] の階層。
Show only visible
[Show only visible] 機能を使用すると、階層内の非表示要素をすべて除外できます。デフォルトでは、Winscope には表示要素と非表示要素の両方が表示されます。表示要素は黒、非表示要素はグレーで表示されます。
Flat
[Flat] ボタンを押すと、要素間の親子関係が排除され、階層構造が再編成されます。このアクションにより、すべての要素が同じレベルで表示されます。[Show only visible] オプションと組み合わせることで、親要素を除く表示要素のみを階層に表示できます（次の図を参照）。
![[Flat] の階層](https://source.android.google.cn/static/docs/core/graphics/images/hierarchy_flat.png?hl=ja)
図 11. [Flat] の階層。
プロパティ
Winscope では、多くのビューアにプロパティ ビューアが統合されています。このビューアには、階層ビューから選択した要素に関連付けられたさまざまなプロパティのリストが表示されます。たとえば、ビューアは WindowManager 内のアクティビティのプロパティや、システム UI 内のビューのプロパティを表示できます。
特定のプロパティの詳細については、SurfaceFlinger、WindowManager、ViewCapture の各トレースのセクションをご覧ください。
このセクションでは、[Show diff]、[Search]、[Show defaults] の各機能の一般的な階層について説明します。
Show diff
[Show diff] 機能の使用方法は、階層ビューで差分を表示する場合と同じです。
[Search] とフィルタ
[Search] 機能の使用方法は、階層ビューで検索する場合と同じです。
Show defaults
デフォルトでは、Winscope には変更されたプロパティ値のみが表示されますが、これはそれぞれのデータ型のデフォルト値ではありません。たとえば、Winscope では、ブール値の false、整数の 0、オブジェクトの null、配列の [] は省略されます。
これによってユーザーに表示されるプロパティのリストが簡素化されますが、特定の状況では、要素に関連するすべての情報を包括的に把握することが有益です。このような場合、[Show defaults] オプションを選択すると、空の値または null 値を含むプロパティを含め、Winscope で使用可能なすべてのプロパティが表示されます。
図 12. プロパティのデフォルト値。
一般的なショートカット
Winscope は、次のショートカットをサポートしています。
図 13. 一般的なショートカット。