how to debug angular services in browser

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 ?

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.

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

Fiddle.

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

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

Try ng-inspect chrome extension.

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