javascript - 我如何在 firefox 调试器中找到这个变量的值？

Question

我是调试 JavaScript 和 AngularJS 的新手。我几乎在以下代码段的每一行都有断点，但我无法在火狐调试器。调试器中有一个非常密集的变量嵌套结构。 在 Firefox 调试器变量结构中的什么位置可以找到下面代码中的 response 或 data 或 content 的值？

警报表示 confirmStatus 变量的值未更改其默认值，因此未通过调用后端服务填充，即使后端服务调用生成的控制台日志表明它是解雇了。我想找出返回的内容以及返回的形式，以便我可以更改下面的客户端代码。

这是我通过调试器运行的 Javascript 代码段:

$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!")
});

Answer 1

我建议先使用调试器。这意味着:

• 使用开发人员工具菜单或键盘快捷键打开调试器:https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Open_the_debugger
• 选择您要调试的文件，快捷键在 mac 上，然后输入您的 .js 文件的一部分以在调试器中打开它。
• 您现在应该可以看到 .js 文件的源代码，您可以在左侧导航栏中单击要停止的行，例如$scope.confirmStatus = ....

angular 还有一个很好的技巧，您可以从控制台访问范围。为此

• 这次再次打开开发人员工具到控制台而不是调试器
• 在页面上右键单击 angular 拥有的一些 html 附近的页面，然后选择“检查元素”
• 在控制台中:angular.element($0).scope()，您将有权访问该元素的 Controller 范围。

也就是说，您可能想 try catch http.post 的错误处理程序。例如

$http.post(res).then(function(response) {}, 
                     function(err) {});