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

概要

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

chrome.google.com

起動の方法

• 拡張機能のインストールが成功している場合、デベロッパーツールのタブにAnguryが追加されます。

機能

Component Tree: Properties

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

Component Tree: Injector Graph

• 各コンポーネントとサービスクラスの依存関係が表示されます。

Router Tree

• pathとコンポーネントを表示します。
• router-outletのネスト構造を表現します。

NgModules

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

終わりに

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