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

Answer 1

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.

Answer 2

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

Fiddle.

Answer 3

Try ng-inspect chrome extension.

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

Answer 4

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');

Answer 5

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/