How do I access the scope variable in browser39s console using AngularJS

Questions

I would like to access my $scope variable in Chrome s JavaScript console. How do I do that?

I can neither see $scope nor the name of my module myapp in the console as variables.

Answers

Pick an element in the HTML panel of the developer tools and type this in the console:

angular.element($0).scope()

http://en.wikipedia.org/wiki/WebKit http://en.wikipedia.org/wiki/WebKit

You can also target the scope by element ID, like so:

angular.element(document.getElementById( yourElementId )).scope()

  Addons/Extensions   

There are some very useful Chrome extensions that you might want to check out:

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk http://ng-inspector.org/ http://ng-inspector.org/

  Playing with jsFiddle   

When working with jsfiddle you can open the fiddle in show mode by adding /show at the end of the URL. When running like this you have access to the angular global. You can try it here:

http://jsfiddle.net/jaimem/Yatbt/show http://jsfiddle.net/jaimem/Yatbt/show

  jQuery Lite   

If you load jQuery before AngularJS, angular.element can be passed a jQuery selector. So you could inspect the scope of a controller with

angular.element( [ng-controller=ctrl] ).scope()

Of a button

 angular.element( button:eq(1) ).scope()

... and so on.

You might actually want to use a global function to make it easier:

window.SC = function(selector){
    return angular.element(selector).scope();
};

Now you could do this

SC( button:eq(10) )
SC( button:eq(10) ).row   // -> value of scope.row

http://jsfiddle.net/jaimem/DvRaR/1/show/ http://jsfiddle.net/jaimem/DvRaR/1/show/

Source

License : cc by-sa 3.0

http://stackoverflow.com/questions/13743058/how-do-i-access-the-scope-variable-in-browsers-console-using-angularjs

Related