How to debug a Typescript source ?

[vincenzocaselli]

I am using WWD regularly in Web/Angular project and I'm very happy with it.

However, for a pure didactic approach, I would like to be able to open a simple .ts file and debug it in Eclipse.
After all this is exactly what is represented in the image at the WWD homepage (github.com/eclipse/wildwebdeveloper), isn't it?
Well, I just don't understand how to do it.

I also tried with VS Code and there it is straightforward: Run, Start debugging (or just F5), Node.js and debugging starts.
If in Eclipse+WWD I try to right click on a .ts file and select Debug as, Node program, I get a pop up error that asks to set a tsconfig.json or just starting debugging. The latest option gives another error, while for the former I don't know how to fill that file.

Is it possible to get a straightforward TS debugging experience with Eclipse? Is there some tutorial somewhere?
Thank you very much
Vincenzo

[Lucas3oo]

Also if you have an Angular project you will have tsconfig.json on a folder above the main.ts file. So WWD will ask to create a a new or skip it.
@vincenzocaselli I suppose you have found this: https://github.com/eclipse/wildwebdeveloper/blob/master/TIPS_and_FAQ.md

[vincenzocaselli]

Hi @Lucas3oo
thank you for the hint.
I tried both with tsconfig.json file on a folder above the main.ts and at the same level (like in the figure below), but in both ways I get the same error.

What am I missing? Is it possible to get a zip containing a minimal project with all the settings needed for debugging?
Thank you very much

[Lucas3oo]

I have only tried it with Angular projects.
For that I have found that I first have to add the Chrome browser under Prefeences->General->web browser.
On Mac the location will be "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

Then under "Run->Debug configurations..." I will add "Chrome debug" and in the "Browser" tab I select "Chrome".
The URL is https://localhost:4200 and working dir is the folder with the Eclipse WWD project. Where I have tsconfig.json.

Chrome will start and I can see that Eclipse is sending commands to Chrome about setting breakpoints. But when the code execute in Chrome it will never stop at the breakpoints.

But your issues I haven't seen.

[mickaelistria]

The issue about breakpoint not being hit when debugging Angular applications is now tracked in #735

[wesleybl]

@vincenzocaselli maybe this problem was fixed by #1306

[mickaelistria]

I think #1174 fixes it: debugging typescript is just a matter of doing Right Click > Debug As > Node application on a .ts file.