Debugging AngularJS in Chrome developer tools?

Question

I'm trying to debug a $http problem in our app and when I step into $http.get the debugger doesn't show the value of any AngularJS local variables. Hover shows nothing and right click 'Evaluate in console' throws Uncaught ReferenceError: url is not defined

Is there someway to see the values of variables inside AngularJS during debugging?

Thanks.

[Edit for Bruno] This is the code where context is lost, (angular.js (1.4.8)):

function createShortMethods(names) {
   forEach(arguments, function(name) {
      $http[name] = function(url, config) {
         return $http(extend({}, config || {}, {
            method: name,
            url: url
         }));
      };
   });
}

Stepping into $http.get (above) neither url nor config have values in the debugger. url probably has a value as the REST API is accessed over the network.

Tried Batarang, it does not want to work with Angular 1.4.8

[Update] Looks like this is related to Angular's use of strict mode, I'll have to work around that.

Thanks to everyone for their time & thoughts.

Answer 1

You can try AngularJS Batarang . It is for debugging angular applications. ng-inspector for AngularJS can also help you.

Answer 2

您可以在$http.get(XXX)之前添加一个断点，然后在Chrome的控制台中通过写入变量名称来检查变量。