Angular デバッグ プラグインAngularJS Batarang

現在、フロントエンド開発に携わる場合、人気の MVVM フレームワークは絶対に避けては通れません。ここでは、自分で入手する必要がある場合のために、3 つの人気のあるフレームワーク Devtools を紹介します。 Vue.js 開発ツール、AngularJS BatarangReact、開発者ツール。この記事では主にAngularJS Batarangについて紹介します

AngularJS Batarang プラグインの使用方法

1. AngularJS Batarang プラグインのオフラインインストール方法は、以下の方法を参照してください。 古いバージョンの Chrome ブラウザの場合、まずタブページで [chrome://extensions/] と入力しますをクリックしてChrome拡張プログラムに入り、このサイトからダウンロードしたプラグインを解凍し、拡張機能ページにドラッグします。

2. Chrome ブラウザの最新バージョンを直接ドラッグ アンド ドロップしてインストールすると、「 「パッケージが無効です。CRX-HEADER-INVALID」エラー メッセージが表示される場合は、Baidu を参照してください。Chrome プラグインのインストール時に「CRX-HEADER-INVALID」解決策が表示され、インストール後に使用できるようになります。

3. インストールが完了すると、プラグイン バーにアイコンが表示されます。

4. 以下に示すように、Chrome ブラウザで Angular アプリケーションを開き、コンソールを開くと、追加のAngularJSのページで「有効」にチェックを入れるとコントロールが使用できるようになります。

5. 以下に示すように、[モデル] をクリックします。左側はアプリケーション内のすべてのスコープの情報で、右側はアプリケーション内のすべてのスコープの情報です。は、対応するスコープのモデル情報です。スコープをクリックすると、スコープ内のすべてのモデル情報が右側に表示されます。 Scope の前の「<」をクリックすると、Elements 内でスコープが配置されている DOM タグにジャンプします。

6.Performace はアプリケーションのパフォーマンスを示します。左側に監視ツリーが表示されます。ツリーのノードをクリックすると、対応する要素要素にジャンプします。右側に表示されているのは、監視式のパフォーマンスです。このページは、パフォーマンスの最適化に役立ちます。

7. 依存関係には、命令とサービスの間の依存関係が表示されます。命令を選択すると、それが依存するサービスが表示されます。サービス間の依存関係をグラフで視覚化します。赤い線は依存関係を表します

8. 最後にオプション ページです。 「アプリケーションを表示」、「スコープを表示」、「バインディングを表示」の 3 つのオプションがあります。各オプションをチェックすると、デバッガ中に対応するコンテンツがページ上で強調表示されます。

9. ご質問がある場合は、ヘルプをご確認ください

10. 要素タグで選択します。特定のタグをクリックすると、要素ページの右側のコンテンツに追加の AngularJS プロパティ ページが表示されます。このページには、選択した HTML コンテンツのスコープのプロパティが表示されます。この機能は、Angular スコープを理解するのに非常に役立ちます。 Angular Scope をよく理解していない場合は、この機能をさらに活用できます。