41

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.

Improve this question
1

4 Answers 4

Reset to default
29

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 :).

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That's brilliant! Is there an easy way to add breakpoints to any lines that throw an exception within Angular2? I've found a little button that says "pause on exceptions", is that what you were talking about?
I didn't know about this button, if it works it's perfect. You can click on the file name in the console to be redirected at the line which threw the exception. Obviously it will be much easier to debug if you use the angular2 unminified file in dev mode.
My problem is that I do see error messages but they are pointing to .js files instead of the .ts files. This makes debugging very hard since the line numbers do not match for .ts and .js files.
In your console settings (the three dots on top right), check "enable javascript source maps". This should redirect the js files to the corresponding ts files. Then check that every .map file is correctly loaded. You can generate them by checking the corresponding option in your vs project properties in "typescript > debugging".
24

Open web developer console, go to "Sources" section. Press "cntrl+p". A search box will open where type ".ts" and find your file or directly search your file like "myfile.ts". Open it and you can put breakpoints directly in the code, the same way we put breakpoints in a js file and Voila, you can debug Typescript.

Improve this answer

1 Comment

Thanks! This was the answer I've been searching for--for a very long time.
7

I think this doesn't just hold for Angular2, but given you come from a Java background I assume this is more like "how do I successfully debug JavaScript web apps" in general.

Related to this I highly suggest you to take a look at the Chrome Devtools page (given you use Chrome which has very neat devtools build-in).
On that page there are a lot of useful tutorials. Specifically in your case probably the article on Debugging JavaScript which has some cool tipps like conditional debugging, breaking on DOM modifications, even break on caught/uncaught exceptions etc.

I also often suggest people to do the free Code School course on Discover Devtools which is nice as well.

In the case of TypeScript, also make sure that you enable sourcemaps. As you probably know TypeScript isn't directly executed by the browser, but rather it is being "compiled" (or as it's called "transpiled") into JavaScript. That said, you probably don't wanna debug the transpiled JS but rather the TypeScript code you wrote. To enable sourcemaps, set the proper flag in your tsconfig.json:

{
  "version": "1.6.2",
  "compilerOptions": {
    ...
    "sourceMap": true
  },
  "exclude": [
     ...
  ]
}
Improve this answer

Comments

3

If you are coming from the Java world, there's a good chance you are already using IntelliJ IDEA from JetBrains. If so, then it is possible to debug JavaScript (and TypeScript) applications directly in the IDE using the same interface you use for Java applications.

JetBrains has some documentation on the subject that might help.

As was said in other answers, you can also use the Chrome Inspector's debugger. Personally, I greatly prefer using IntelliJ to do that instead.

If you are just looking for examples on how the workflow goes, then take a look at this Github project that shows the use of Webpack with Angular2.

Improve this answer

5 Comments

I love IntelliJ for Java and intend to work in it for this too, but for now I'm doing everything manually. I want to learn how all of this fits together before using any IDE which automates things, so I can understand what the IDE does.
The Google Chrome debugger does the exact same thing as IntelliJ. There's nothing manual or more pure about it. It's just a different debugger, just as Firefox had a different debugger. If you have it, use it. Really.
Right, but I mean for my entire workflow - what's generated when the project is created, how does that fit together, how is it being built and what happens when I click run? Debugging is just one part of it all; I'm still learning the other stuff too. I'd prefer to manually write all of those files and run those commands until I understand it; then the IDE can do it for me.
OK, but your question was specific to debugging. The only thing you want to prevent IDEA from doing for you to know how things work is to not let it do the automatic transpiling of TypeScript to JavaScript. You want to use tsc for that (or babel or traceur). But that right there even makes my point; there is no one way to do stuff. Especially with Angular 2 were there are not even best practices yet. If you want to see one way to setup a project, check out the update to my response.
That project looks really helpful, thanks! I didn't mean to dismiss your suggestion; I do intend to start doing anything I can in IntelliJ before too long. My point is; I'm only just learning how everything works here. When I used IntelliJ, it generated a lot of files that I didn't have any idea about and there was a lot of options that I had no idea about in the project setup. Now I understand what a package.json does and what npm start does, so I'll start using IntelliJ again before too long.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.