2013-01-11 11 views
35

私は角型アプリケーションでファクトリ/サービスを作成しました。ブラウザで角度サービスをデバッグする方法

ブラウザでデバッグします。インスタンスにアクセスしてその関数と変数の値が何であるかを調べる方法はありますか?

角度範囲は、使用してアクセスすることができ

angular.element(e).scope() 

工場にアクセスするための同様の方法はありますか?

angular.element(e).injector().get('serviceName') 

そしてangularjsサービスがシングルトンているので、任意のangular.element上でこれを行うことは、常に同じサービスインスタンス/オブジェクトを返します。

答えて

65

私はあなたがこのようなものを使用することができると信じて。

+4

+1これは素晴らしいです。これでデバッグが非常に簡単になります。角度のある文書へのリンクを追加すると、ユーティリティがさらに改善されます。 ref:http://docs.angularjs.org/api/angular.element – rubish

+1

これはまだ有効ですか?以前はうまくいきました。しかし、今は 'ReferenceError:e is not defined 'と書かれています。 –

+2

@IvanWangはい、それでも有効です。ちょうどテストされ、それは働いています。 'e'変数が定義され、アクセス可能であることを確かめますか? (これは[this](http://stackoverflow.com/questions/13326351/uncaught-referenceerror-e-is-not-defined)のような問題かもしれませんか?) – bmleite

8

は、任意のコントローラにあなたのサービスを注入し、その後console.log(myService);

Fiddle

+0

+1を回答 – murtaza52

3

私はそれはのようなサービスの検査方法については定かではないんだけど、角度Batarangは角度のアプリをデバッグするための偉大なChromeの拡張機能です。役に立つかもしれない。 Batarangため

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk

便利なドキュメント:@bmleiteが言ったように

http://www.c-sharpcorner.com/UploadFile/9c2805/getting-started-with-angularjs-batarang/

6

は、あなたが使用することができます。

angular.element({DOM element}).injector().get('serviceName') 

あなたは(使用「の要素を望んでいたDOM要素を選択することができます'タブ、Firefox/Firebugの' HTML 'タブ)をクリックして、' Console 'タブで$ 0をクリックします。

最も単純な要素は、ngAppディレクティブを持つものです。 最終的なコードは次のとおりです。

var myService = angular.element($0).injector().get('serviceName'); 

その後、あなたは彼のすべての変数と関数へのアクセス権を持っている:

myService.getConfig('dev'); 
4

ng-inspect Chromeの拡張機能を試してみてください。

$ get( 'serviceName')は、サービスまたはファクトリインスタンスを返します。

+2

に、ng-inspectはAngular Batarang –

関連する問題