How to debug on TypeScript code instead of JavaScript code in Chrome?

Question

I only found a way to do that manually every time from the start. I write code in Angular2 with WebStorm 11.

Possible duplicate of [How to debug angular app using angular-cli webpack?](https://stackoverflow.com/questions/39348213/how-to-debug-angular-app-using-angular-cli-webpack) — JayChase, Jul 23 '19 at 11:51

score 5 · Answer 1 · answered Jul 07 '16 at 23:57

5

You need to have your transpiler generate .map files.

answered Jul 07 '16 at 23:57

Adrian Brand

20,384
4
39
60

score 1 · Accepted Answer · answered Jul 08 '16 at 01:35

As Adrian said your transpiler needs to produce map info, which can also be generated into the js output file instead of a separate .map file.

One issue you may run into is that within lambda functions (aka arrow functions) you will not be able to see your variables, neither in chrome nor in WebStorm. However, there is a setting in WebStorm that allows you to see your this. variables properly within the WebStorm debugger:

Goto Help, Find Action, enter "registry". In the registry check js.debugger.map.this.by.source.code

How to debug on TypeScript code instead of JavaScript code in Chrome?

2 Answers2