How to debug Webpack-dev-server (in memory) with WebStorm?

Question

As per WebStorm they require that we debug against a dist directory as specified in: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

however, as per Webpack recommended development process, we should be running webpack-dev-server, so its all in memory as in:

webpack-dev-server –inline –progress –colors –display-error-details –display-cached –hot –port=3000

so there is no dist directory, which contridicts examples posted @: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

Is there a way to have webpack-dev-server use dist dir so WebStorm can be mapped to it so we can use source maps for live debug?

FYI this is the project I am using to test:

https://github.com/ocombe/ng2-webpack

tx

Sean

Answer 1

As you know, you will have to create a distribution/production bundle with source maps and then use that for debugging in WebStorm. Personally, I run tests with Karma while I have the webpack-dev-server running. Karma tests can be run with the debugger and that usually satisfies any of my debugging needs, while the webpack-dev-server provides my "manual test" to see how I'm doing.

I guess what I'm saying for your case... you can have the dev server running while, at the same time, having some kind of automated build with source maps running at the exact same time which you can run and use the debugger on. This can be intensive though so it depends on your memory and processing power.

Answer 2

Currently WebStorm needs the created Bundle + SourceMap from WebPack to analyze it and find the actual Breakpoint.

So in short, you can't debug WebPack applications just with the WebPack DevServer. However you can run the normal WebPack build with file watching in parallel to it: `