【Debug by Angular JS console】Angular JSコンソールでデバッグを行う際のコツを詳しく解説

あなたは新しい機能に取り組んでいるか、バグを追跡しようとしています。期待しているように何かがうまくいかない…、そんなときどうしていますか？

 

通常は、必要に応じてconsole.logを追加するか、ブレークポイントを追加します。しかし、時々、リフレッシュを引き起こさずに、現在のデータを見たいと思うことがあります。

 

そのような状況では、AngularJSのヘルパーを使用して、ブラウザのコンソールで必要な情報を多く利用できるようにすると良いでしょう。

 

 

セットアップ

まず、Chrome / Safariのデベロッパーツールで関連する要素（右クリックと「要素の検査」）を選択するか、要素パネルで要素を選択します。

これらのブラウザでは、現在選択している要素は、$ 0変数を使用してコンソールで利用できます。

 

AngleJS要素にアクセスするには、angular.elemen（$ 0）を記述します。

これはjqLiteインターフェイスとして認識されていますが、デバッグに便利なユーティリティがいくつかあります。

 

 

angular.elementによるデバッグ

.scope()

この関数は、この要素に関連付けられているスコープを返します。あなたが期待どおりにすべての値が設定されているかどうかを調べるために便利です。スコープ上の値や関数を呼び出すこともできますが、以下のものを使用してください。angle.element（$ 0）.scope（）.$ apply（）を実行してフォローアップし、変更が適切に適用されることを確認することをお勧めします。

 

いくつかのケースでは、代わりに.isolateScope（）を呼び出すことをお勧めします。

 

.controller()

同様に、現在の要素に関連付けられているコントローラを返します。まれに、要素に複数のコントローラがあり、特定のコントローラに興味がある場合があります。 ngModelでは、必要なコントローラの名前を関数に渡すことができます。

 

今では、スコープ上で直接データを公開することはめったにないはずのコンポーネントでは、コントローラにアクセスするのはいいですが、通常これはangular.element（$ 0）.scope（）.$ ctrlと同義です。

 

.injector（）

これは、かなり混乱させられるような、重大なデバッグセッションでは特に便利です。

 

これらのシナリオでは、コンソールから直接、あらゆる種類のサービスを自分で呼び出すことに頼る必要があり、injectorがそれを可能にします。

 

たとえば、アプリケーションにUsersServiceがある場合、angle.element（$ 0）.injector（）.get（ ‘UsersService’）を使用して、そのアプリケーションへの参照を取得できます。

 

 

 

▼こちらの記事もおすすめです！

 

 

 

 

 

※本記事はAngularJS Console Debugging Tricksを翻訳・再構成したものです。