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.

It'll be easier to get help if you show the problematic piece of your code (controller + view), including the line where you set the break point. — Bruno
– Bruno, Commented Nov 24, 2015 at 17:02
Doubtful, it's a problem with Chrome Developer Tools debugger and Angular, but here you go. — Mike Summers
– Mike Summers, Commented Nov 24, 2015 at 17:03
I don't follow. If I step into $http.get and url and config are function parameters I should be able to inspect their values in the local (function) context. That is, url and config are in the current stack frame. — Mike Summers
– Mike Summers, Commented Nov 24, 2015 at 17:13
Possible duplicate: stackoverflow.com/questions/18782069/… — Bruno
– Bruno, Commented Nov 24, 2015 at 17:27
@Bruno, not a duplicate, other SO questions of this nature are about debugging applications using Angular, this question is about debugging AngularJS itself (inside AngularJS). The problem is that Angular declares strict which disables looking at local variables inside Angular. — Mike Summers
– Mike Summers, Commented Nov 24, 2015 at 19:19

Muhammad Hassan · Accepted Answer · 2015-11-24 17:02:59Z

0

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

answered Nov 24, 2015 at 17:02

Muhammad Hassan

14.5k7 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Valerio · Accepted Answer · 2015-11-24 17:16:50Z

0

You can add a breakpoint before the $http.get(XXX)and then in the Chrome's console you can inspect variables by writing their names.

answered Nov 24, 2015 at 17:16

Valerio

1104 bronze badges

2 Comments

Mike Summers Over a year ago

The problem I'm trying to debug is inside Angular, I really need visibility.

Valerio Over a year ago

have you checked the value of the url variable? if you write $http it return the $http function.

Collectives™ on Stack Overflow

Debugging AngularJS in Chrome developer tools?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related