はじめに
今年も Advent Calendar の季節がやってきました。これは Angular Advent Calendar 2024 1 日目の記事です。 今回は Angular チームが公式に提供している Angular DevTools について紹介します。
Angular DevTools とは
Angular DevTools とは、Chrome や Firefox 向けのブラウザ拡張として提供されているサービスである。
使用するにはお使いのブラウザにあわせて Chrome Web Store または Firefox Addons からインストールする必要がある。
DevTools を有効にするにはアプリケーションを optimization: false にして build する必要がある。この設定はたいてい angular.json に記述されているので、自身の設定を確認してみるのがよい。
最新バージョンの CLI でアプリケーションを作った場合は development build をしたときに optimization: false の設定になるため、ng start を実行してローカル環境で動かせば DevTools は有効になる。
Angular DevTools でできること
拡張機能をインストールすることでブラウザの DevTools から機能を使うことができるようになる。
外観はキャプチャのような感じである。 Components / Profiler / Injector Tree の 3 つの機能があり、これらをタブで切り替えながら使用することができる。
Components
初期表示は Components である。Components はアプリケーション内のコンポーネントとディレクティブの階層構造を視覚的に見ることができる。
画面上に表示されているコンポーネントを確認したり、そのコンポーネント class のプロパティを参照したりすることができる。 また Input プロパティを持つコンポーネントであれば、その値を更新することもできる。
また、いまフォーカスしているコンポーネントのインスタンスにアクセスすることができ、コンソールで $ng0 を入力することで参照することができる。
他にも実際の DOM の要素を見たり、ソースコードを見ることもできる。
Profiler
Profiler では Angular の変更検知の実行を見ることができる。これはパフォーマンスの計測に有用である。
パフォーマンス計測をしたい操作の前で記録を開始し、操作後に記録を停止することで結果を確認できる。
例として /dashboard にページ遷移をして対応するコンポーネントが表示されたときの profiler の結果を以下に示す。
Bar chart として表示されている中のひとつの bar をクリックすると時間を要した順にコンポーネントやディレクティブが表示される。
今回の例では DashboardComponent に時間がかかっており、このときの method は changes で時間は 6.8 ms である。 method の changes について説明がないが、ソースコードを見るとこれは変更検知を意味していることがわかる。
つまり、DashboardComponent の変更検知処理に 6.8 ms かかっているということである。
1 instance はそのままの意味で、インスタンスがひとつであることを指しており、@for や ngFor でループしている場合、ここはループした数になる。
Injector Tree
3 つ目は Injector Tree である。これはアプリケーションのインジェクターの階層を見ることができる。
インジェクターには環境インジェクターと要素インジェクターがあるため DevTools でもふたつの階層をそれぞれ確認できるようになっている。
さらに、ここでは各インジェクターに登録されているインスタンスを確認することができる。
例えば @Injectable({ providedIn: 'root' }) を使って定義した class は root インジェクターに登録される。環境階層の Root をクリックするとその一覧を見ることができる。
また登録されているインスタンスをログに出力することもできる。
階層が深くなるとどのインジェクターに登録されたインスタンスを使用しているのかわかりにくくなるため、ビジュアル化された階層を見て確認できるのはとても便利である。
まとめ
今回は Angular DevTools について紹介しました。
Angular でアプリケーションを開発している場合、変更検知の回数がパフォーマンスに直結することを実感することが多いですが、DevTools を使うことで簡単に可視化できるため、個人的には Profiler が推し機能です。
リリース初期と比較すると、バージョンを重ねるごとに機能も増えているので今後のアップデートにも注目したいです。
明日は aereal さんです！
