[英]What's the best way to debug Javascript/AngularJS?
I just started learning Javascript and AngularJS and have a decent Java and C++ background. 我刚刚开始学习Javascript和AngularJS,并且具有不错的Java和C ++背景。 Today I wasted an entire day debugging a trivial error that boiled down to a missing comma in a JSON file:
"name": "Melbourne", "snippet": "Melbourne" "location":{"lat": "37.8136S", "long": "144.9631E"}
今天,我浪费了一整天的时间来调试一个琐碎的错误,该错误归结为JSON文件中的逗号缺失:
"name": "Melbourne", "snippet": "Melbourne" "location":{"lat": "37.8136S", "long": "144.9631E"}
Now I'm wondering: What's the Javascript/AngularJS way of debugging? 现在,我想知道: Javascript / AngularJS的调试方式是什么? - for this specific case as well as in general.
-对于这种特定情况以及一般情况。 Spending 8 hours changing every line in the code can't be the solution.
花费8个小时更改代码中的每一行都不是解决方案。 In C++/Java I would look at the stacktrace so i checked the chrome console output and found:
在C ++ / Java中,我将查看stacktrace,因此我检查了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
How is this supposed to help me? 这对我有什么帮助? I see nothing that even remotely tells me to check my JSON or my code - only library code.
我看不到任何东西甚至可以远程告诉我检查JSON或代码-仅是库代码。 The offending lines in my code are
我的代码中令人反感的行是
//citycontroller.js //citycontroller.js
$scope.cities= City.query();
//cityservice.js //cityservice.js
cityServices.factory('City', ['$resource',
function($resource){
return $resource('cities/:cityId.json', {}, {
query: {method:'GET', params:{cityId:'cities'}, isArray:true}
});
}]);
Why isn't there a stacktrace for either of these lines? 为什么在这两行中都没有堆栈跟踪?
I spent most of yesterday dealing with nearly the same issue. 我昨天大部分时间都在处理几乎相同的问题。
A lot of the Angular error messages will actually provide a link that you can click on and it'll take you to an Angular page that provides a more detailed error message. 实际上,许多Angular错误消息都会提供一个链接,您可以单击该链接,然后将您带到Angular页面,该页面提供了更详细的错误消息。
This feature doesn't seem to have made it to the parser, yet. 解析器似乎尚未实现此功能。
The stacktrace probably should include a reference to your code but maybe it's too far down or maybe it didn't make it in there because the problem isn't with your code, it's the library the blew up. stacktrace可能应该包含对您的代码的引用,但是可能它太低了,或者它没有放入其中,因为问题不在您的代码中,而是库被炸了。
My clues in these error messages come from the first few lines: 这些错误消息的线索来自前几行:
My error was nearly the same but I got "Unexpected token ," which means that it found a comma where it didn't expect one. 我的错误几乎相同,但是我得到了“意外的令牌”,这意味着它在一个没想到的地方找到了一个逗号。
As for other Angular debugging practices, my code lives and dies by the Chrome (or other browser) console. 至于其他Angular调试实践,我的代码在Chrome(或其他浏览器)控制台中存活并消亡。
Console.log is one of my code's best friends. Console.log是我的代码最好的朋友之一。 In this case, it probably would have helped you because it wouldn't have been able to properly render the malformed JSON in the console.
在这种情况下,它可能会为您提供帮助,因为它无法在控制台中正确呈现格式错误的JSON。 When in doubt, log it out!
如有疑问,请注销!
I also use the Chrome console to see the exact request that was sent to the server. 我还使用Chrome控制台查看发送到服务器的确切请求。 Often, you can double click that request and open it in a new tab so that you can make the same request repeatedly.
通常,您可以双击该请求并在新选项卡中将其打开,以便您可以重复发出相同的请求。 This gives you the opportunity to see how the response changes as you change the server-side code.
这使您有机会查看更改服务器端代码时响应如何变化。
Good luck. 祝好运。
Why isn't there a stacktrace for either of these lines?
为什么在这两行中都没有堆栈跟踪?
Because the operation is async,and doesnt happen on the "same" stack as your code.When the ajax call returns,the stack in your code has already been "unstacked" a long time ago. 因为该操作是异步的,并且不会在与代码“相同”的堆栈上发生。当ajax调用返回时,代码中的堆栈已很久以前就已经“取消堆栈”了。
A good explaination of what's happening can be seen here : 在这里可以很好地解释正在发生的事情:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/EventLoop
There is basically,a stack,a heap like other languages, but also a queue of async operations that will have their own stack. 基本上,像其他语言一样,有一个堆栈,一个堆,但是还有一系列异步操作,它们将拥有自己的堆栈。
That's why for instance,if you throw an error in a async operation(a setTimeout for instance),you cant try/catch it in the stack that triggered the setTimeout. 例如,这就是为什么如果在异步操作(例如setTimeout)中引发错误,则无法在触发setTimeout的堆栈中尝试/捕获它。
The rest is experience.You need to learn that Object.parse (native) refers to JSON.parse.You also need to learn AngularJS api,obviously angular.fromJson method is related to a (de)serialization operation. 剩下的就是经验。您需要学习Object.parse(本机)是指JSON.parse。还需要学习AngularJS api,显然是angular.fromJson方法与(反序列化)操作有关。
You can set your breakpoints in chrome(hit f12 to open up dev tools). 您可以在chrome中设置断点(按f12键打开开发工具)。 Then you can step through your code line by line to see if you missed anything.
然后,您可以逐行浏览代码以查看是否错过了任何内容。 Also you might want to look up Batarang which is a chrome extension used to specifically debug AngularJS.
另外,您可能想查找Batarang,它是用于专门调试AngularJS的chrome扩展程序。
Use IDE application to inspect the code for syntax error. 使用IDE应用程序检查代码中的语法错误。 If your application retrieves data from JSON file, use JSON validator to check those json file.
如果您的应用程序从JSON文件检索数据,请使用JSON验证程序检查那些JSON文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.