How do I access the scope variable in browser s console using AngularJS

Question

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

User · Answer

This is a way of getting at scope without Batarang, you can do:

var scope = angular.element('#selectorId').scope();

Or if you want to find your scope by controller name, do this:

var scope = angular.element('[ng-controller=myController]').scope();

After you make changes to your model, you'll need to apply the changes to the DOM by calling:

scope.$apply();

User · Answer

I usually use jQuery data   function for that      0  data    scope   The  0 is currently selected item in chrome DOM inspector   1   2    and so on are previously selected items

User · Answer

Pick an element in the HTML panel of the developer tools and type this in the console   angular element  0  scope     In WebKit and Firefox   0 is a reference to the selected DOM node in the elements tab  so by doing this you get the selected DOM node scope printed out in the console   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    Batarang  This has been around for a while  ng-inspector  This is the newest one  and as the name suggests  it allows you to inspect your application s scopes    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  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      - gt  value of scope row   Check here  http   jsfiddle net jaimem DvRaR 1 show

User · Answer

For only debugging purposes I put this to the start of the controller      window scope    scope      scope today   new Date      And this is how I use it     then delete it when I am done debugging

User · Answer

Say you want to access the scope of the element like   lt div ng-controller  hw  gt  lt  div gt    You could use the following in the console    angular element document querySelector   ng-controller hw     scope      This will give you the scope at that element

User · Answer

I ve used angular element     ng-scope    scope    in the past and it works great  Only good if you have only one app scope on the page  or you can do something like    angular element    div ng-controller controllerName     scope    or angular element document getElementsByClassName  ng-scope    scope

User · Answer

This requires jQuery to be installed as well  but works perfectly for a dev environment  It looks through each element to get the instances of the scopes then returns them labelled with there controller names  Its also removing any property start with a   which is what angularjs generally uses for its configuration   let controllers    extensive   false    gt                let result                          each  i  e    gt                    let scope   angular element e  scope                    if Object prototype toString call scope        object Object    amp  amp  e hasAttribute  ng-controller                          let slimScope                           for let key in scope                            if key indexOf          0  amp  amp  key      constructor     extensive                                slimScope key    scope key                                                                       result   e  attr  ng-controller      slimScope                                                 return result

User · Answer

Just define a JavaScript variable outside the scope and assign it to your scope in your controller   var myScope      app controller  myController   function   scope log         myScope    scope             That s it  It should work in all browsers  tested at least in Chrome and Mozilla    It is working  and I m using this method

User · Answer

To improve on jm s answer        Access whole scope angular element myDomElement  scope        Access and change variable in scope angular element myDomElement  scope   myVar   5  angular element myDomElement  scope   myArray push newItem       Update page to reflect changed variables angular element myDomElement  scope    apply      Or if you re using jQuery  this does the same thing         elementId   scope        elementId   scope    apply      Another easy way to access a DOM element from the console  as jm mentioned  is to click on it in the  elements  tab  and it automatically gets stored as  0   angular element  0  scope

User · Answer

To add and enhance the other answers  in the console  enter    0  to get the element  If it s an Angularjs application  a jQuery lite version is loaded by default     If you are not using jQuery  you can use angular element  0  as in   angular element  0  scope     To check if you have jQuery and the version  run this command in the console     fn jquery   If you have inspected an element  the currently selected element is available via the command line API reference  0  Both Firebug and Chrome have this reference   However  the Chrome developer tools will make available the last five elements  or heap objects  selected through the properties named  0   1   2   3   4 using these references   The most recently selected element or object can be referenced as  0  the second most recent as  1 and so on   Here is the Command Line API reference for Firebug that lists it s references      0  scope   will return the scope associated with the element  You can see its properties right away   Some other things that you can use are     View an elements parent scope       0  scope    parent     You can chain this too        0  scope    parent  parent   You can look at the root scope        0  scope    root   If you highlighted a directive with isolate scope  you can look at it with       0  isolateScope    See Tips and Tricks for Debugging Unfamiliar Angularjs Code for more details and examples

User · Answer

At the Chrome s console     1  Select the   Elements   tab  2  Select the element of your angular s scope  For instance  click on an element  lt ui-view gt   or  lt div gt   or etc   3  Type the command   angular element  0  scope     with following variable in the angular s scope   Example  angular element  0  scope   a angular element  0  scope   b   Chrome s console

User · Answer

in angular we get jquery element by angular element       lets c        angular element   scope      example    lt div id    gt  lt  div gt

User · Answer

Put a breakpoint in your code at a somewhere close to a reference to the  scope variable  so that the  scope is in the current  plain old JavaScript  scope   Then your can inspect the  scope value in the console

User · Answer

Just assign  scope as a global variable  Problem solved   app controller  myCtrl      scope     http   function  scope   http        window  scope    scope      We actually need  scope more often in development than in production   Mentioned already by  JasonGoemaat but adding it as a suitable answer to this question

User · Answer

Inspect the element  then use this in the console  s      0  scope       s  is the scope object if it exists

User · Answer

One caveat to many of these answers  if you alias your controller your scope objects will be in an object within the returned object from scope     For example  if your controller directive is created like so    lt div ng-controller  FormController as frm  gt  then to access a startDate property of your controller  you would call angular element  0  scope   frm startDate

User · Answer

Somewhere in your controller  often the last line is a good place   put  console log  scope     If you want to see an inner implicit scope  say inside an ng-repeat  something like this will work    lt li ng-repeat  item in items  gt             lt a ng-click  showScope  event   gt show scope lt  a gt   lt  li gt    Then in your controller  function MyCtrl  scope                 scope showScope   function e            console log angular element e srcElement  scope               Note that above we define the showScope   function in the parent scope  but that s okay    the child inner implicit scope can access that function  which then prints out the scope based on the event  and hence the scope associated with the element that fired the event    jm- s suggestion also works  but I don t think it works inside a jsFiddle   I get this error on jsFiddle inside Chrome    gt  angular element  0  scope   ReferenceError  angular is not defined

User · Answer

I agree the best is Batarang with it s  scope after selecting an object  it s the same as angular element  0  scope   or even shorter with jQuery     0  scope    my favorite    Also  if like me you have you main scope on the body element  a    body   scope   works fine

User · Answer

If you have installed Batarang  Then you can just write    scope   when you have the element selected in the elements view in chrome   Ref - https   github com angular angularjs-batarang console

[angularjs] How do I access the $scope variable in browser's console using AngularJS?

Examples related to angularjs

Examples related to angularjs-scope