アプリケーションのデバッグ
Componentsタブでは、アプリケーションの構造を探索できます。 DOM内のコンポーネントとディレクティブのインスタンスを視覚化し、それらの状態を検査または変更できます。
アプリケーション構造の探索
コンポーネントツリーは、アプリケーション内のコンポーネントとディレクティブの階層的な関係を表示します。
コンポーネントエクスプローラ内の個々のコンポーネントまたはディレクティブをクリックして選択し、それらのプロパティをプレビューします。 Angular DevToolsは、コンポーネントツリーの右側で、プロパティとメタデータを表示します。
コンポーネントツリーの上にある検索ボックスを使用して、名前でコンポーネントまたはディレクティブを検索します。
ホストノードに移動
特定のコンポーネントやディレクティブのホスト要素に移動するには、コンポーネントエクスプローラでダブルクリックします。 Angular DevToolsはChromeのElementsタブまたはFirefoxのInspectorタブを開き、関連するDOMノードを選択します。
ソースに移動
コンポーネントの場合、Angular DevToolsはSourcesタブ（Chrome）とDebuggerタブ（Firefox）でコンポーネント定義に移動できます。 特定のコンポーネントを選択したら、プロパティビューの右上にあるアイコンをクリックします。
プロパティ値の更新
ブラウザのDevToolsと同様に、プロパティビューでは入力と出力、またはその他のプロパティの値を編集できます。
プロパティ値を右クリックし、この値の種類で編集機能が利用可能な場合は、テキスト入力フィールドが表示されます。
新しい値を入力してEnterキーを押すと、この値がプロパティに適用されます。
コンソールで選択したコンポーネントまたはディレクティブにアクセス
コンソールのショートカットとして、Angular DevToolsは、最近選択したコンポーネントやディレクティブのインスタンスへのアクセスを提供します。
現在選択されているコンポーネントやディレクティブのインスタンスを参照するには$ng0と入力し、以前に選択したインスタンスを参照するには$ng1と入力し、さらに前に選択したインスタンスを参照するには$ng2と入力するなどします。
ディレクティブまたはコンポーネントの選択
ブラウザのDevToolsと同様にページを検査して、特定のコンポーネントやディレクティブを選択できます。 Angular DevToolsの左上隅にある Inspect element アイコンをクリックし、ページ上のDOM要素の上にマウスを置きます。 拡張機能は関連するディレクティブやコンポーネントを認識し、コンポーネントツリーで対応する要素を選択できます。
Inspect Deferrable views
Alongside the directives, the directive tree also includes @defer blocks.
Clicking a defer block shows more details in the properties sidebar: the different optional blocks (for example @loading, @placeholder, and @error), the configured triggers (defer triggers, prefetch triggers, and hydrate triggers), and timing options such as the minimum and after values.
Hydration
When hydration is enabled on your SSR/SSG application, the directive tree shows the hydration status of each component.
In case of errors, an error message is displayed on the affected component.
The hydration status can also be visualized on the application itself by enabling the overlay.
Here is an illustration of the hydration overlays on a Angular e-shop example app.