概要
Angular DevToolsは、Angularアプリのデバッグやパフォーマンス解析を行えるブラウザ拡張機能。Angular DevToolsからインストールでき、検証ツールから確認できる。
アプリケーションを開く
拡張機能を開くと、次の2つのタブがある:
| タブ | 機能 |
|---|---|
| Components | アプリ内のコンポーネントやディレクティブを確認し、状態の表示・編集が可能 |
| Profiler | アプリのパフォーマンスを解析し、Change Detectionのボトルネックを特定可能 |
右上には、ページで動作しているAngularのバージョンと拡張機能の最新コミットハッシュが表示される。
Angular アプリケーションが検知されない
Angular DevToolsで「Angular application not detected」と表示された場合、ページ上にAngularアプリが存在せず通信できないことを意味する。多くの場合、確認しているページが正しいか、Angularアプリが実行中かを確認する必要がある。
「We detected an application built with production configuration」
「We detected an application built with production configuration. Angular DevTools only supports development builds.」と表示された場合、ページ上にAngularアプリはあるが、プロダクション用に最適化されてビルドされていることを意味する。プロダクションビルドではデバッグ機能が削除され、DevToolsとの通信ができなくなる。
DevToolsを使うには、最適化を無効にしてビルドする必要がある。ng serve はデフォルトで無効になっており、デプロイ済みアプリをデバッグする場合はビルド設定で {"optimization": false} を指定する。
コンポーネント
アプリケーションのデバッグ
Components タブでは、アプリの構造を確認できる。DOM 上のコンポーネントやディレクティブのインスタンスを可視化し、状態を確認・変更できる。
アプリケーション構造を確認する
コンポーネントツリーは、アプリ内のコンポーネントとディレクティブの階層関係を表示する。
コンポーネントエクスプローラーで個々のコンポーネントやディレクティブをクリックすると選択でき、右側にプロパティやメタデータが表示される。名前で検索する場合は、ツリー上部の検索ボックスを使う。
ホストノードに移動する
特定のコンポーネントやディレクティブのホスト要素に移動するには、コンポーネントエクスプローラーでダブルクリックする。ブラウザの Elements または Inspector タブが開き、対応する DOM ノードが選択される。
ソースに移動する
コンポーネントでは、Angular DevTools で Sources（Chrome）や Debugger（Firefox）タブに移動してコンポーネント定義を確認できる。特定のコンポーネントを選択した後、プロパティビュー右上のアイコンをクリックする。
プロパティの値を更新する
ブラウザの DevTools と同様に、プロパティビューで入力値や出力値などを編集できる。プロパティ値を右クリックし、編集可能な場合はテキスト入力欄が表示される。新しい値を入力してEnterで適用する。
選択したコンポーネントやディレクティブにコンソールからアクセスする
コンソールで、Angular DevTools は最近選択したコンポーネントやディレクティブのインスタンスにアクセスできる。$ng0 は現在選択中、$ng1 は1つ前、$ng2 はさらに前のインスタンスを参照する。
ディレクティブまたはコンポーネントを選択する
ブラウザの DevTools と同様に、ページを検査して特定のコンポーネントやディレクティブを選択できる。Angular DevTools の左上の「Inspect element」アイコンをクリックし、ページ上の DOM 要素にカーソルを合わせると、対応するコンポーネントやディレクティブが認識され、コンポーネントツリーで選択可能になる。
インジェクターを確認する
インジェクターは、クラスのコンストラクタで宣言された依存関係を解決し、必要なインスタンスを提供する。Angular では、インジェクターが階層的に構成されており、これを「環境階層」と「要素階層」と呼びます。
- 環境階層：アプリケーション全体で共有されるインジェクターの階層。ルートモジュールで定義されたプロバイダーは、環境階層に配置され、アプリケーション全体でアクセス可能
- 要素階層：各コンポーネントやディレクティブごとに存在するインジェクターの階層。親コンポーネントから子コンポーネントへと依存関係が伝播されるが、子コンポーネントで新たにプロバイダーを定義することで、独自の依存関係を持つことも可能
アプリケーションのインジェクター階層を確認する
Injector Tree タブでは、アプリ内で設定されたインジェクターの構造を確認できる。環境階層と要素階層の2つのツリーが表示される。
解決パスを可視化する
特定のインジェクターを選択すると、そのインジェクターからルートまで Angular の DI アルゴリズムがたどる経路がハイライトされる。要素インジェクターの場合、要素階層で解決できない依存関係を探す際に参照される環境階層のインジェクターもハイライトされる。
インジェクターのプロバイダーを表示する
プロバイダーが設定されたインジェクターをクリックすると、右側にプロバイダーの一覧が表示される。ここで提供されているトークンとその型を確認できる。
プロファイラー
Profiler タブでは、Angular の Change Detection の実行を可視化できる。アプリのパフォーマンスに Change Detection がどのように影響するかを把握するのに役立つ。
Profiler タブでは、現在のアプリのプロファイリングを開始したり、過去のプロファイルをインポートできる。開始するにはタブ左上の丸をホバーして「Start recording」をクリック。
プロファイリング中は、Angular DevTools が Change Detection やライフサイクルフックの実行などのイベントを記録する。アプリを操作して Change Detection を発生させ、データを生成する。終了するには再度丸をクリックして「Stop recording」。
アプリケーションの実行状況を把握する
プロファイルの記録やインポート後、Angular DevTools は Change Detection サイクルの可視化を表示する。
バーはアプリの各 Change Detection サイクルを表す。バーが高いほど、そのサイクルで Change Detection にかかった時間が長い。バーを選択すると、次の情報が表示される。
- このサイクルでキャプチャされたコンポーネントやディレクティブのバーグラフ
- Angular がこのサイクルで Change Detection に費やした時間
- ユーザー視点での推定フレームレート
- Change Detection をトリガーしたソース
コンポーネントの実行状況を把握する
Change Detection サイクルのバーをクリックすると、各コンポーネントやディレクティブで Change Detection に費やした詳細時間が表示される。例えば、NgForO fディレクティブが合計でどれだけ時間を使ったかや、どのメソッドが呼ばれたかが分かる。
階層ビュー
Change Detectionの実行はフレームグラフのような階層ビューでも可視化できる。
- 各タイルはレンダーツリー上の特定の位置にある画面要素を表す。例として、LoggedOutUserComponentが削除され、LoggedInUserComponentがレンダリングされた場合、両方が同じタイルに表示される
- x軸はこのサイクルにかかった全時間、y軸は要素階層を表す。要素のChange Detectionでは、そのディレクティブや子コンポーネントもレンダリングされる
- タイルの色はAngularが費やした時間に応じて変わり、最も時間がかかったタイルを基準に色の強度が決まる
- タイルをクリックすると右側パネルに詳細が表示され、ダブルクリックでズームして子要素を見やすくできる
Change Detection と OnPush コンポーネントをデバッグする
通常、フレームグラフは各 Change Detection フレームでアプリのレンダリング時間を可視化する。しかし、 OnPush コンポーネントは入力プロパティが変化した場合のみ再レンダリングされる。
Change Detection を通過したコンポーネントだけを表示したい場合は、フレームグラフ上部の「Change detection」チェックボックスを選択。これにより、Change Detection を通過したコンポーネントがハイライトされ、再レンダリングされなかったOnPushコンポーネントなどは灰色で表示される。
記録のインポートとエクスポート
記録したプロファイルは、右上の「Save Profile」ボタンをクリックしてJSONファイルとしてエクスポートし、ディスクに保存できる。後でプロファイラーの初期画面で「Choose file」を使ってファイルをインポート可能。
