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

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

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

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

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

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

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

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

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

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

9. ご質(zhì)問(wèn)がある場(chǎng)合は、ヘルプをご確認(rèn)ください

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