98. Angular DevTools — 部品の中身を覗く拡張機能

Angular DevTools はブラウザ拡張として入れる公式のデバッグ道具です。インストールすると DevTools に Angular タブが増え、Components ビューで画面を構成するコンポーネントツリーを一覧できます。ツリーから部品を選ぶと、その部品が持つ signal や input の現在値をその場で確認できます。

実務で効くのは「データは正しいのに表示だけおかしい」の切り分けです。DevTools で見た signal の値が正しければ疑うのはテンプレート側、値がすでに間違っていれば疑うのはデータの流れ側、と原因の範囲を半分に絞れます。Profiler ビューでは変更検知を録画でき、どの部品の描画に時間がかかったかも測れます。

注意したいのは、Angular DevTools が使えるのは開発モードのビルドだけという点です。本番ビルドのサイトでは動きません。また @if で消えた部品はDOMにもツリーにも現れないので、「値がおかしい」以前に「そもそも部品が生まれているか」の確認にもコンポーネントツリーが役立ちます。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// Angular DevTools でできること(Chrome/Firefox/Edge 拡張)
//
// ── Components ビュー ──
// app-root
//  └─ app-user-list      ← ツリーから部品をクリックで選ぶ
//      └─ app-user-card
//
// 選んだ部品の右側に現在値が並ぶ:
//   user (input)      { name: '佐藤', age: 28 }
//   selected (signal) false
//
// → 切り分けの考え方:
//   値が正しい   … 疑うのはテンプレート(表示側)
//   値がおかしい … 疑うのはデータの流れ(親からの受け渡しや通信)
//   部品が無い   … @if の条件で生まれていない可能性
//
// ── Profiler ビュー ──
// 録画ボタン → 画面を操作 → 停止
// 変更検知が1回走るごとに棒グラフが1本増え、
// どのコンポーネントの描画に何ミリ秒かかったかが見える
//
// 注意: 動くのは開発ビルド(ng serve)だけ。本番ビルドでは使えない

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗