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

公開:2021/01/10
更新:2021/01/10
1 min読了の目安(約1000字TECH技術記事

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などのサーバー上でも使えるのでオススメです😊