Debugging issue with Webpack


Let's start with what I have set up: This is a basic project which uses Typescript, then Webpack to transpile and run it as a server. Webstorm is used as the debugging tool (also to write my code in ofcourse!)

The problem is, I cannot seem to debug the .ts(main.ts) file that has been set up as the entry for Webpack.

The other class I import(someClass.ts) and reference I can debug without issue.


As an extra test I let Webpack transpile the code to my ./dist folder. I then debug the html via Webstorm.
Then I can debug the file used as Webpack entry.

here is my test project:

So I am a bit at a loss, did I miss something?


Comment actions Permalink

Well, I managed to fix the issue.

I changed devtool: "source-map" to "inline-source-map".

Comment actions Permalink

Thank you, Yannick, that was the one and only way to make Intellij hit the breakpoints in Angular! Though Angular CLI doesn't allow you to change webpack.config directly, so a little workaround was needed:

Hope it will help somebody who was also desperately searching for a solution for many hours.


Please sign in to leave a comment.