開発覚書はてな版

個人的な開発関連の備忘録

【Chrome】おすすめ拡張機能 - Angury

概要

Google Chrome拡張機能を紹介します。 Angularデバッグ用に使用できるAnguryです。 Chromeウェブストアからインストールすることで使用可能です。

chrome.google.com

起動の方法

機能

Component Tree: Properties

f:id:kakkoya:20190519180943p:plain

  • コンポーネントのツリー構造が分かります。
  • 選択したコンポーネントがハイライトされます。
  • プロパティの値を変更できます。
  • EventEmitterの実行ができます。

Component Tree: Injector Graph

f:id:kakkoya:20190519180958p:plain

Router Tree

f:id:kakkoya:20190519181014p:plain

NgModules

f:id:kakkoya:20190519181028p:plain

  • 使用しているモジュールのimports, exports, providersなどの情報がわかります。

終わりに

  • Angular開発時のデバッグ時に役立つツールなので、開発者の方はぜひインストールした方が良いです。
  • きれいにコンポーネント化している場合、プロパティやEventEmitterでのデバッグ機能がすごい役に立ちます。
  • 既存のプロジェクトのコンポーネントが複雑になっていて、その解析をするのに役に立ちます。