Chrome ブラウザを使用して AngularJS アプリケーションをデバッグする方法_AngularJS

AngularJS アプリケーションを構築するとき、Chrome、Firefox、IE などのブラウザーの JavaScript コンソールからアプリケーション内の非表示のデータやサービスにアクセスするのは常に少し困難です。ここでは、JavaScript コンソールを介して実行中の Angular アプリケーションを表示または制御するのに役立ついくつかの簡単なテクニックを紹介します。これにより、リアルタイムでの Angular アプリケーションのテスト、変更、さらには変更が容易になります。
1: アクセス範囲

JS の簡単な行で、ページ内の任意のスコープ (分離されたスコープも含む!) にアクセスします:

> angular.element(targetNode).scope()
-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

分離スコープの場合:

> angular.element(targetNode).isolateScope()
-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

ここでは `targetNode` を HTML ノードへの参照として使用します。 `document.querySelector()`

2: スコープ ツリーを表示

アプリケーションを効果的にデバッグするために、ページ内のスコープ階層を表示する必要がある場合があります。 AngularJS Batarang はまさに私たちが必要とするもので、現在のスコープ階層を表示したり、その他の非常に便利な機能を備えた Chrome ブラウザ拡張機能です。

3: サービスを利用する

ngApp がどこで定義されているかに関係なく、インジェクター関数を使用して任意のサービスへの参照を取得できます (Angular のブートストラップ メソッドを使用する場合は、手動で $rootElement を取得できます):

> angular.element('html').injector().get('MyService')
-> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}

その後、サービスを注入するのと同じように、サービスを呼び出すことができます。

4: アクセスコントローラーの使用手順

一部のディレクティブは、追加 (通常は共有) 機能を備えたコントローラーを定義します。コンソールから特定のディレクティブのコントローラー インスタンスにアクセスするには、単にcontroller() メソッドを使用します。

> angular.element('my-pages').controller()
-> Constructor {}

最後のアプローチはより高度ですが、あまり一般的には使用されません。
5: Chrome コンソールの機能

Chrome のコンソールには、ブラウザ アプリをデバッグするための優れたショートカットが多数あります。 Angular 開発におけるベスト プラクティスのいくつかを次に示します:

• $0-$4: 表示ウィンドウで最近選択した 5 つの DOM 要素にアクセスします。クロールの範囲を選択できるのは非常に便利です。
• $(selector) と $$(selector): それぞれ querySelector() と querySelectorAll の高速な代替手段

このメソッドを提供してくれた @zgohr に感謝します!

結論

いくつかの簡単なトリックを使用すると、ページの任意のスコープ内のデータにアクセスし、スコープ階層を表示し、サービスを挿入し、命令を制御できます。

次回、少し調整したり、自分の作業を確認したり、コンソールを通じて AngularJS アプリケーションを制御したりする場合は、これらのコマンドを覚えて、私と同じように役立つことを願っています。