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.

Micheal Hill
  • 1,619
  • 2
  • 17
  • 38
  • 2
    I think you should watch this video at [AngularConnect 2015](https://www.youtube.com/watch?v=cAC4d3KIQcM), about [Batarangle](https://github.com/rangle/batarangle) – Eric Martinez Jan 04 '16 at 00:09

4 Answers4

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

Camille Wintz
  • 951
  • 7
  • 8
  • 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? – Micheal Hill Jan 04 '16 at 00:35
  • 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. – Camille Wintz Jan 04 '16 at 01:44
  • 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. – Bas van Dijk Jan 07 '16 at 16:24
  • 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". – Camille Wintz Jan 07 '16 at 18:55
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.

Manohar Prasad
  • 241
  • 2
  • 2
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": [
     ...
  ]
}
Juri
  • 32,424
  • 20
  • 102
  • 136
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.

Michael Oryl
  • 20,856
  • 14
  • 77
  • 117
  • 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. – Micheal Hill Jan 05 '16 at 09:31
  • 2
    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. – Michael Oryl Jan 05 '16 at 12:25
  • 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. – Micheal Hill Jan 05 '16 at 12:43
  • 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. – Michael Oryl Jan 05 '16 at 13:14
  • 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. – Micheal Hill Jan 06 '16 at 03:04