Angular DevTools 導入

Angular開発用のChrome拡張 Angular DevToolsの導入方法メモ。

手順

1. Dev Toolsのインストール
   • Angular DevTools
     • Edgeもこちらでいけるはず。
   • Firefox用のアドオンもある。
2. Angularサイトの立ち上げ
   • ng serve --configuration development
3. 開発者ツールの「Angular」タブ
   • Composeなどが確認できるようになる。

注意点

Angularサイトを立ち上げるときは最適化オプションをオフにする必要がある。

• DevToolsの概要 の冒頭に書かれている。
• angular.jsonでoptimization: falseとすると最適化をオフにできる。
  • こんな感じ

なお，ng newで作成したプロジェクトであれば，development環境は最適化をオフにしているのでこちらを利用すればよい。

• 手順2において--configuration developmentとしているのはこのため。