CODEWITHSUNDEEP
debuggingwebtypescriptangular
Micheal Hill
Micheal Hill

Reputation: 1659

Angular 2 Errors and Typescript - how to debug?

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.

Upvotes: 41

Views: 37331

Answers (4)

Manohar Prasad
Manohar Prasad

Reputation: 241

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.

Upvotes: 24

Michael Oryl
Michael Oryl

Reputation: 21662

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.

Upvotes: 3

Juri
Juri

Reputation: 32930

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": [
     ...
  ]
}

Upvotes: 7

Camille Wintz
Camille Wintz

Reputation: 951

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

Upvotes: 29

Related Questions