IDEA 14 - debugging typescript

Question

We've a project in Idea with some typescript files and use an ant file to transpile it generating the matching js and map files.

When debugging through IDEA (html file) breakpoints in the typescript files do not work and we don't see the map files in chrome even though existing.

What is the expected structure of the js, ts and map files for debugging typescript with IDEA ?

Debugging with chrome/firefox is fine.

Answer 1

You have to install Jetbrains IDE Support extension for Chrome (I also allowed this extension on incognito - chrome://extensions) and a plugin named Javascript Debugger for Intellij Idea or Webstorm (it needs Spy-js and NodeJs plugins to be enabled also).

After that you just have to do a right click on your project's .html file and click on 'Debug your-html.html'

Update: Sourcemap files are needed to debug, while compiling typescript --sourcemap option must be set.

Answer 2

I just ran into this. However I am not working on a frontend project.. but it might help just as well.

To debug in intellij, I first compile my typescript files.

• I defined tsconfig.json
• I used tsc -p tsconfig.json to compile.

To make debugging work I did the following

• Added "sourceMap": true to tsconfig.json

• I ran the compiled js file

  ==> debug just works when I put a breakpoint in the ts file.

Let me know if this does not resolve your scenario, I will investigate an modify the answer.

This is the project I am working on for reference: https://github.com/coder-on-deck/easy-typescript-setup