Angular 2 Errors and Typescript - how to debug?

Question

I've just started a project to learn Angular2 and Typescript+Javascript. I come from a Java background and my approach to debugging projects is usually a combination of stack traces, compile errors, and - on larger projects - lots of test cases. However, much of this doesn't seem to directly translate to the world of web-dev; particularly debugging my code that's interacting with Angular2's libraries.

Could anyone suggest any approaches that I can take to debug code working with Angular2? Specifically; how can I see what parts of my HTML/TS is causing issues? I've checked the console, from which I can see that I've broken Angular2, but it doesn't seem much more informative from that.

Just to clarify; I don't want help for this specific instance. I'd like to learn how to diagnose+fix these problems myself.

Answer 1

Assuming you're using Chrome, you can put breakpoints in the "sources" tab in your console. Those breakpoints can be set on the ts files. If you need informations from the js file, you can uncheck Javascript sourcemaps in the console settings: this will allow you to put breakpoints in the js files.

On a breakpoint, you can do the usual (watch, spies, stack trace, etc...). You can also write js in the console accessing local variables directly, for instance:

function b(){
    var c = 1;
    // if you put a breakpoint here and type c in the console, it will write "1"
}

Specifically in angular 2, you might want to add breakpoints in the "throw e" lines in their library, you'll get more detailed stack traces. If you click on the "..." in their stack traces, you'll get access to your file that caused the error.

That's for actual bugs. Now, for performance, on the "timeline" tab, you can click on the "record" button on the top left. Once you're done recording (click "finish"), you'll see CPU usage. You can zoom on events in the timeline to see which part of the code is using up too much resource.

You can also track memory by checking the "memory" checkbox.

If you need to debug an iframe, there is a select box in console saying "top frame" which you can set to whichever iframe you want.

If I've forgotten anything important, just ask :).