Angularでオススメのデバッグ方法

AngularのChrome Extensionsでハマった時があったのでそのメモです。
Vue.jsやReactを使ってる人はVue.js devtoolsやReact Developer Toolsを使ってますよね。
stateの値が見れたり凄く便利です👍

自分はVue.js → React → Angularと経験していったので、AngularでもAuguryというChrome Extensionsを入れてました。
シンプルな開発ぐらいなら良いのですが、ある程度規模が大きくなるとこのツールを有効にしてると凄くブラウザがもっさりするし、むしろ変な不具合が起きた時がありました😅

仕方なくconsole.logをしてたのですがもっと良い方法があります。

1. chrome devtoolsでSourcesパネルを開く

2. command + pしてコンポーネント名を入力する
   

3. ブレークポイントを貼ってリロードする
   

Angular以外でも使えると思うけど、これでどんな値が@Inputで受け取ってるかなど分かりやすくなります。
productionビルドでなければ、GKEなどのサーバー上でも使えるのでオススメです😊

2021/05/19追記

こちらもおすすめです！

• 使ってみよう！Angular DevTools