アプリケーションのデバッグ

この章ではAngular DevToolsの第1の機能であるアプリケーションのデバッグについて解説します。

この機能でできること

Angular DevToolsはアプリケーションのデバッグのため次の機能を提供します。

• コンポーネントツリーの可視化
• コンポーネント・ディレクティブのデバッグ
• コンソールによる複雑なデバッグのためのユーティリティ提供

コンポーネントツリーの可視化

Angular DevToolsの "Components" タブを開くと、アプリケーションを構成するコンポーネントツリーと、そのテンプレート中に存在するディレクティブが表示されます。コンポーネントツリーにある任意のノードをクリックして選択すると、隣のペインに対象の情報が表示されます。また、下部にはルートコンポーネントから選択されたコンポーネントまでの階層構造を表すパンくずリストも表示されます。

Componentsタブの構成

設定オプション（歯車のアイコン）から "Show comment node"を有効にすると、NgIfやNgForOFなどのコメントノードを伴う構造ディレクティブもツリーに含まれます。

コンポーネント・ディレクティブのデバッグ

コンポーネントツリーから任意のノードを選択すると、対応するコンポーネントとコンポーネントに紐づくディレクティブのインスタンスに関する情報が表示されます。
表示される情報は大きく2つです。上部（最初は折りたたまれています）には選択したコンポーネントのメタデータが表示され、下部にはコンポーネントとディレクティブのインスタンスの状態が表示されます。

インスタンス情報の表示

選択されたインスタンスが持つプロパティが一覧で表示されます。プロパティの値が特定の型（文字列や数値などのプリミティブ）であれば、クリックして編集し、状態を変更できます。さらにそのプロパティがデータバインディングされていれば、変更はただちにアプリケーションへ反映されます。

プロパティの変更と反映

プロパティが @Input() デコレータを持っている場合は、単なるプロパティではなくインプットプロパティであることが表示されます。インプットプロパティも通常のプロパティと同じように編集可能です。

インプットプロパティは区別される

複雑なデバッグのためのユーティリティ

Angular DevToolsのUIではサポートされていない複雑なデバッグのために、コンソールで使えるユーティリティが提供されています。

コンポーネントツリーで選択されたコンポーネントインスタンスは コンソールで$ng0 という変数に格納されます。この変数にアクセスすることでインスタンスの状態を好きなように変更したり、コンポーネントやサービスのメソッドを呼びだしたりできます。ただし、UIでのプロパティ変更と違ってデータバインディングは自動的に更新されません。データバインディングの更新をトリガーするにはデバッグ用の window.ng APIが持つ applyChanges() 関数を呼び出し、引数には変更を反映したいコンポーネントのインスタンスを渡します。

コンソールでの複雑なデバッグ

他の window.ng APIを呼び出す場合にも $ng0 変数は便利です。たとえばあるコンポーネントに紐付けられているディレクティブのインスタンスを取得するには、 ng.getDirectives($ng0) を呼び出すのが簡単です。window.ng APIの詳細は@angular/core/global APIリファレンスを参照してください。

ディレクティブの取得