12

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.

Michael Oryl
  • 20,856
  • 14
  • 77
  • 117
  • Is there a place where you can specify a mapping file? – Ruan Mendes Dec 16 '15 at 18:46
  • @JuanMendes If you look at the TypeScript compiler config in IDEA (or WebStorm), you will see a checkbox for enabling source maps. It's "Generate source maps". You could also enable that in the tsconfig.json file if you tell IDEA to use the external config instead. You would put "sourceMap": true in the compilerOptions object. – Michael Oryl Dec 16 '15 at 20:31

2 Answers2

4

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:

enter image description 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:

enter image description here

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.

Michael Oryl
  • 20,856
  • 14
  • 77
  • 117
  • 2
    I configured everything like it is described in the JetBrains post, but my typescript breakpoints wont get hit, only those breakpoints in the unbundled js files – Ced Mar 18 '16 at 10:03
  • This don't work using webpack-dev-server. Is there a way to make IntelliJ debugger work running webpack-dev-server? – Endel Dreyer Sep 08 '16 at 17:09
  • 1
    I tried all methods for several hours yesterday and none of them worked. So I ended up using Chrome's built-in debugging tool... – KuN Nov 22 '16 at 17:01
  • New in 2018.3 -- if you wanna break in your main js file, click the checkbox "Ensure breakpoints are detected when loading scripts" – activedecay Jan 04 '19 at 16:28
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"
    ]
  }
}
Community
  • 1
  • 1
Mcmil
  • 795
  • 9
  • 25