locked
$scope variable in Chrome RRS feed

  • Question

  • User665472878 posted

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

    Wednesday, May 9, 2018 6:49 PM

Answers

  • User-1134632663 posted

    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   // -> value of scope.row

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 9, 2018 6:57 PM

All replies

  • User-1134632663 posted

    have u seen module myapp in in the console as variables?

    Wednesday, May 9, 2018 6:53 PM
  • User665472878 posted

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

    Wednesday, May 9, 2018 6:54 PM
  • User665472878 posted

    please mention if any chrome addons

    Wednesday, May 9, 2018 6:55 PM
  • User-1134632663 posted

    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   // -> value of scope.row

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 9, 2018 6:57 PM