What's the best way to debug Javascript/AngularJS?

Question

I just started learning Javascript and AngularJS and have a decent Java and C++ background. 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"}

Now I'm wondering: What's the Javascript/AngularJS way of debugging? - for this specific case as well as in general. Spending 8 hours changing every line in the code can't be the solution. In C++/Java I would look at the stacktrace so i checked the chrome console output and found:

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. The offending lines in my code are

//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}
});
}]);

Why isn't there a stacktrace for either of these lines?

Answer 1

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.

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.

My clues in these error messages come from the first few lines:

• "Unexpected string" = I'm getting a string when I don't expect one
• "at Object.parse (native)" = I was trying to parse through some data
• "at fromJson" = I was parsing JSON data when I crashed

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.

Console.log is one of my code's best friends. 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. When in doubt, log it out!

I also use the Chrome console to see the exact request that was sent to the server. 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.

Answer 2

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.

A good explaination of what's happening can be seen here :

https://developer.mozilla.org/en-US/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.

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.

Answer 3

You can set your breakpoints in chrome(hit f12 to open up dev tools). 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.

Answer 4

Use IDE application to inspect the code for syntax error. If your application retrieves data from JSON file, use JSON validator to check those json file.