调试 Javascript/AngularJS 的最佳方法是什么？

Question

我刚开始学习 Javascript 和 AngularJS，并且拥有不错的 Java 和 C++ 背景。 今天我浪费了一整天的时间来调试一个小错误，该错误归结为 JSON 文件中缺少逗号："name": "Melbourne", "snippet": "Melbourne" "location":{"lat": "37.8136S", "long": "144.9631E"}

现在我想知道： Javascript/AngularJS 的调试方式是什么？ - 对于这种特定情况以及一般情况。花 8 小时更改代码中的每一行都不是解决方案。 在 C++/Java 中，我会查看堆栈跟踪，因此我检查了 chrome 控制台输出并发现：

SyntaxError: Unexpected string
at Object.parse (native)
at fromJson (http://localhost:8000/app/bower_components/angular/angular.js:1078:14)
at $HttpProvider.defaults.defaults.transformResponse (http://localhost:8000/app/bower_components/angular/angular.js:7317:18)
at http://localhost:8000/app/bower_components/angular/angular.js:7292:12
at Array.forEach (native)
at forEach (http://localhost:8000/app/bower_components/angular/angular.js:323:11)
at transformData (http://localhost:8000/app/bower_components/angular/angular.js:7291:3)
at transformResponse (http://localhost:8000/app/bower_components/angular/angular.js:7963:17)
at wrappedCallback (http://localhost:8000/app/bower_components/angular/angular.js:11319:81)
at http://localhost:8000/app/bower_components/angular/angular.js:11405:26 angular.js:9778

这对我有什么帮助？我什至没有看到任何远程告诉我检查我的 JSON 或我的代码的东西——只有库代码。我的代码中有问题的行是

//citycontroller.js

$scope.cities= City.query();

//cityservice.js

cityServices.factory('City', ['$resource',
function($resource){
return $resource('cities/:cityId.json', {}, {
  query: {method:'GET', params:{cityId:'cities'}, isArray:true}
});
}]);

为什么这两行都没有堆栈跟踪？

Answer 1

我昨天大部分时间都在处理几乎相同的问题。

许多 Angular 错误消息实际上会提供一个链接，您可以单击该链接，它会将您带到一个 Angular 页面，该页面提供更详细的错误消息。

这个功能似乎还没有进入解析器。

堆栈跟踪可能应该包含对您的代码的引用，但可能它太远了，或者它没有出现在那里，因为问题不在于您的代码，而是库被炸毁了。

我在这些错误消息中的线索来自前几行：

• "Unexpected string" = 我不希望得到一个字符串
• "at Object.parse (native)" = 我试图解析一些数据
• "at fromJson" = 我崩溃时正在解析 JSON 数据

我的错误几乎相同，但我得到了“Unexpected token ”，这意味着它在不期望的地方找到了一个逗号。

至于其他 Angular 调试实践，我的代码由 Chrome（或其他浏览器）控制台决定。

Console.log 是我的代码最好的朋友之一。在这种情况下，它可能会对您有所帮助，因为它无法在控制台中正确呈现格式错误的 JSON。如有疑问，请注销！

我还使用 Chrome 控制台查看发送到服务器的确切请求。通常，您可以双击该请求并在新选项卡中打开它，以便您可以重复发出相同的请求。这使您有机会看到响应如何随着您更改服务器端代码而变化。

祝你好运。

Answer 2

您可以在 chrome 中设置断点（按 f12 打开开发工具）。然后你可以逐行检查你的代码，看看你是否遗漏了什么。此外，您可能还想查找 Batarang，它是一个用于专门调试 AngularJS 的 chrome 扩展。

Answer 3

为什么这两行都没有堆栈跟踪？

因为操作是异步的，并且不会发生在与您的代码“相同”的堆栈上。当 ajax 调用返回时，您的代码中的堆栈已经在很久以前“unstacked”了。

在这里可以看到对正在发生的事情的一个很好的解释：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop

与其他语言一样，基本上有一个堆栈，一个堆，还有一个异步操作队列，它们将拥有自己的堆栈。

这就是为什么例如，如果您在异步操作中抛出错误（例如 setTimeout），您无法在触发 setTimeout 的堆栈中尝试/捕获它。

剩下的就是经验了。你需要了解Object.parse(native)是指JSON.parse。你还需要学习AngularJS api，很明显angular.fromJson方法与一个(反)序列化操作有关。

Answer 4

使用 IDE 应用程序检查代码中的语法错误。 如果您的应用程序从 JSON 文件中检索数据，请使用 JSON 验证器检查这些 json 文件。