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页面。

此功能似乎尚未进入解析器。

堆栈跟踪可能应该包含对你的代码的引用，但可能它太远或者它没有在那里，因为问题不在于你的代码，它是引爆的库。

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

“意外字符串”=当我不指望一个
“at Object.parse（native）”=我试图解析一些数据
“at fromJson”=我在崩溃时正在解析JSON数据

我的错误几乎相同，但我收到了“意外的令牌”，这意味着它找到了一个逗号，它没有预料到。

对于其他Angular调试实践，我的代码由Chrome（或其他浏览器）控制台生存和死亡。

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

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

祝你好运。

Answer 2

为什么这些线路中没有堆栈跟踪？

因为操作是异步的，并且不会发生在＆＃34;相同的＆＃34;堆栈作为你的代码。当ajax调用返回时，你的代码中的堆栈已经被＆＃34; unstacked＆＃34;很久以前。

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

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

基本上有一个堆栈，一个像其他语言一样的堆，但也有一个异步操作队列，它们都有自己的堆栈。

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

剩下的就是经验。你需要了解Object.parse（native）是指JSON.parse.You还需要学习AngularJS api，显然angular.fromJson方法与（de）序列化操作有关。

Answer 3

您可以在chrome中设置断点（点击f12以打开开发工具）。然后，您可以逐行浏览代码，看看是否遗漏了任何内容。您也可以查看Batarang，它是用于专门调试AngularJS的chrome扩展。

Answer 4

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

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

4 个答案: