how to debug angular services in browser

Question

I have created a factory/service in my angular app.

I want to debug it in the browser. Is there a way that I can access its instance and check what is the value of its functions and variables.

The angular scope can be accessed using

angular.element(e).scope()

Is there a similar way to access factories ?

score 67 · Accepted Answer · answered Jan 11 '13 at 14:08

67

I believe you can use something like this:

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

And since angularjs services are singletons, doing this on any angular.element will always return the same service instance/object.

answered Jan 11 '13 at 14:08

bmleite

26,850
4
71
46

4

+1 This is great. Debugging becomes a lot easier with this. Adding a link to the angular documentation will improve the utility even further. ref: http://docs.angularjs.org/api/angular.element – rubish Mar 13 '13 at 17:33
1

Is this still valid? It was working fine before. But now it says `ReferenceError: e is not defined` – Ivan Wang Oct 17 '14 at 01:36
2

@IvanWang yes, it's still valid. Just tested and it's working. Are you sure the `e` variable is defined and accessible? (could it be a problem like [this](http://stackoverflow.com/questions/13326351/uncaught-referenceerror-e-is-not-defined)?) – bmleite Oct 17 '14 at 08:51
1

@bmleite That could be the reason. Would you please tell me how to define `e` in AngularJs? – Ivan Wang Oct 20 '14 at 23:40
1

@IvanWang `e` represents a local variable containing a reference to the element on which your Angular application (or is it controller?) is defined. You need to define it with `var e = document.body` or whatever is appropriate for your situation. – Steve Oct 22 '14 at 19:34
2

In Chrome, you can select an element in the elements tab and reference it with $0. So you could select your main controller element, use `angular.element($0).injector().get('serviceName')` – Geoff May 25 '16 at 18:38

score 8 · Answer 2 · answered Jan 11 '13 at 15:24

8

Inject your service into any controller and then console.log(myService);

Fiddle.

answered Jan 11 '13 at 15:24

Mark Rajcok

362,217
114
495
492

score 6 · Answer 3 · answered Nov 04 '14 at 10:23

Like @bmleite said, you can use:

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

You can select the wanted DOM element (use 'Elements' tab on Chrome Developper Tools or 'HTML' tab on Firefox/Firebug) and then use $0 to point on it in the 'Console' tab.

The simplest element to select is the one you have your ngApp directive on it. The final code is:

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

Then you have access to all his variables and functions:

myService.getConfig('dev');

score 4 · Answer 4 · answered Feb 22 '15 at 18:46

4

Try ng-inspect chrome extension.

$get('serviceName') in console will return the service or factory instance.

answered Feb 22 '15 at 18:46

Vinay K

5,562
1
18
27

2

ng-inspect is much higher rated than Angular Batarang – Chris Halcrow Apr 05 '17 at 01:12

score 3 · Answer 5 · edited Apr 05 '17 at 05:16

3

I'm not certain about how it inspects services as such, but Angular Batarang is a great Chrome extension for debugging Angular apps. Might be helpful.

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

Useful documentation for Batarang:

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

edited Apr 05 '17 at 05:16

Chris Halcrow

28,994
18
176
206

answered Jun 16 '13 at 01:16

Simon East

55,742
17
139
133

how to debug angular services in browser

5 Answers5

Linked