IntelliJ IDEA TypeScript/Webpack debugging only works with JavaScript breakpoints

Question

I'm toying around with an Angular 2 / Bootstrap 4 / Webpack project, just to see how the new stuff is lining up, and I'm trying to get debugging to work in IntelliJ IDEA 15 in Chrome with the JetBrains Chrome extension.

The problem is that any breakpoints I set in my TypeScript files are ignored. I'm using the built-in transpiler and leaving the JavaScript output files with the same name/location as the TypeScript files, so that my-app.ts is in the same folder as my-app.js and the associated my-app.js.map mapping file.

The odd thing is that if I set breakpoints in the generated JavaScript file, the IDE then breaks in the corresponding spot in the TypeScript file (even though it shows no breakpoint there). I can then step normally since the mapping seems to work.

The problem seems to be that setting a breakpoint in a .ts file doesn't set the needed breakpoint in the corresponding .js file.

Am I doing something wrong (I've never worked with TypeScript debugging before), or is this a bug in IDEA?

P.S. I get the same results whether doing remote JavaScript debugging or using local debugging through IDEA's built-in web server.

Answer 1

I have successfully solved problem with debugging with webpack in Intellij/Webstorm based on this solution: How to debug angular 2 app using angular-cli webpack?. You have to map your main ui project directory and directory with .ts sources to remote url, exactly the same as in the solution upside.

My tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "outDir": "../resources/static/out-tsc",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "../../../node_modules/@types"
    ]
  }
}

Answer 2

The trick was adding a reference to the Webpack internal URL to the debug config. The path to use for that Webpack URL will come from the scripts tab of the debugger when the application is running. You can also see it in Chrome's scripts tag just as easily, but I've included the view from IntelliJ IDEA here:

You can see that the . path in webpack:// corresponds to my project folder (as witnessed by the src path in it). That's what told me that I needed to use the . path for Webpack in the debug config. If your project lines up differently, you'll have to adjust accordingly.

As to why it is webpack:///. (with three slashes) instead of webpack://., that I can't answer. I saw that used in a JetBrains post and that's what led me to that solution of adding an additional forward slash.

Now you need to create your JavaScript debug configuration and set it up like the following:

Adjust your localhost URL and port, as well as your build path (__build__ in my case, maybe build or dist in yours).

Now that I have the debug configuration setup like the above, it works just fine.