Ad

How Can I Find The Value Of This Variable In Firefox Debugger?

I am new to debugging JavaScript and AngularJS. I have breakpoints in virtually every line of the following code segment, but I am not able to find the response variable or data or content in the Firefox debugger. There is a very dense nested structure of variables in the debugger. Where do I look in the Firefox debugger variables structure to find the values for response or data or content in the code below?

The alert says that the confirmStatus variable's value has not changed from its default and thus was not populated by the call to the backend service, even though the backend service call produced console logs indicating that it was fired. I want to find out what is coming back and in what form so that I can alter the client side code below.

Here is the segment of Javascript code that I am running through the debugger:

$scope.$on('$viewContentLoaded', function() {
    var str1 = "/confirm-email?d=";
    var str2 = $routeParams.d;
    var res = str1.concat(str2);
    $http.post(res).then(function(response) {
        $scope.confirmStatus = response.data.content;
            });
    var str3 = "confirmStatus is: ";
    alert(str3.concat($scope.confirmStatus))

    alert("viewContentLoaded!")
});
Ad

Answer

I would suggest using the debugger first. This means:

  • open the debugger with the developer tools menu or keyboard shortcut: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Open_the_debugger
  • Pick the file you want to debug, key shortcut is on mac, then type in part of your .js file to have it open in the debugger.
  • You should see the source code for your .js file now, and you can click in the left-nav to the line you want to stop on, e.g. the $scope.confirmStatus = ....

There is also a good trick with angular where you can access the scope from the console. To do this

  • Again open the developer tools this time to the console not debugger
  • Right-click on the page near some html owned by angular, and pick "Inspect element"
  • In the console: angular.element($0).scope(), and you will have access to the controller scope for that element.

That said, you might want to try and capture the error handler for the http.post. e.g.

$http.post(res).then(function(response) {}, 
                     function(err) {});
Ad
source: stackoverflow.com
Ad