Question

我是调试JavaScript和AngularJS的新手。我在以下代码段的几乎每一行都有断点，但我无法在Firefox调试器中找到response变量或data或content。调试器中有一个非常密集的嵌套变量结构。 我在哪里查看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拥有的html附近的页面，然后选择＆＃34; Inspect element＆＃34;
在控制台中：angular.element（$ 0）.scope（），您将可以访问该元素的控制器范围。

也就是说，您可能想尝试捕获http.post的错误处理程序。 e.g。

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

Answer 2

请记住，此功能将与当前功能并行运行，在稍后阶段响应将来自服务器：

function(response) {
    $scope.confirmStatus = response.data.content;
}

你应该把一个调试器断点放到这个$ http回调函数中 - 一旦回调函数执行结束，响应变量就会被销毁。

您的警报将始终显示未修改的confirmStatus，因为在回调函数中更改了confirmStatus，稍后当响应来自服务器时将执行该函数。

如何在firefox调试器中找到此变量的值？

2 个答案: