Angular でブラウザ プラグイン Batarang を使用する方法

この記事では主に Angular ブラウザ プラグイン Batarang の導入と使用方法を紹介し、参考として提供します。

AngularブラウザプラグインBatarangの紹介

Angular初心者にとって、初めてAngularを引き継ぐときはもっと苦痛になるでしょう。実際、JQuery、Backbone などと比較すると、Angular は比較的敷居が高く、デバッグがより困難です。今回はAngular ChromeプラグインBatarangについて紹介します。プラグインを上手に活用するとAngularへの理解が深まります。

準備

Batarangをインストールします:

1. 方法 1: Chrome App StoreでBatarangを見つけてインストールします。

2. 方法 2: オンラインで Batarang インストール パッケージを見つけ、Chrome ブラウザに直接インストールします。

以下に示すように、

を使用して、インストールされた Batarang プラグインを使用してブラウザーで Angular アプリケーションを開き、コンソールを開きます:

に追加の AngularJS ページがあることがわかります。コンソールで「有効」にチェックを入れると、コントロールが使用できるようになります:

モデル

以下に示すように、左側はアプリケーションのすべてのスコープの情報で、右側はモデルです。スコープに対応する情報。スコープをクリックすると、スコープ内のすべてのモデル情報が右側に表示されます。

スコープの前の「<」をクリックすると、要素内のスコープが配置されている DOM タグにジャンプします。

パフォーマンス

パフォーマンスは、左側に監視ツリーを示し、右側に監視式のパフォーマンスを示します。このページは、パフォーマンスの最適化に役立ちます。

Dependenices

Dependenices は、命令とサービス間の依存関係を表示し、命令が依存するサービスを表示します。

オプション

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

ヘルプ

ご不明な点がございましたら、ヘルプをご確認ください

Element

実際、私が最もよく使うのはElementの右側にあるAngularJS Propertiesタグです。要素タグでタグが選択されると、要素ページの右側に AngularJS プロパティ ページが表示されます。このページには、選択した HTML コンテンツのスコープのプロパティが表示されます。この機能は、Angular スコープを理解するために非常に重要です。非常に便利。 Angular Scope をよく理解していない場合は、この機能をさらに活用できます。

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。

関連記事:

vueを使って2次ルート設定方法を実装

mint-uiを使って道州市の3層連携効果を実現

vue2.0.jsを使って実装マルチレベルリンケージセレクター

以上がAngular でブラウザ プラグイン Batarang を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。