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

1 min read読了の目安(約1100字

AngularのChrome Extensionsでハマった時があったのでそのメモです。
Vue.jsやReactを使ってる人はVue.js devtoolsReact 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追記

こちらもおすすめです!