Remote debugging of angular 2 app built with webpack.

I have set up a test project following the angular guidelines for setting up a Webpack project. I got debugging working using webstorms built in server by setting devtool = "source-map" in "webpack.dev.js" and setting the files to be outputted into [project root]/debug.

Now I want to move the built files over to our applications server and debug from there. I get the files to build to the right directory, and Webstorm can run the project using a debug config pointing to the server at http://localhost:6008, but now, the break points are no longer hit.

I have searched a lot, trying to get this to work, when i finally discover that my original config seem to work, as long as i refresh the browser after i have started debugging.

In other words: When i starting debugging from Webstorm (ctrl+F9), no breakpoints are hit. But if I then select Chrome and hit F5 the break point will hit immediately.

Is this a bug, or am I doing something wrong?

3 comments
Comment actions Permalink

It's a known issue unfortunately:( when debugging using sourcemaps, breakpoints in code that is executed on page loading don't work unless the application is hosted on built-in webserver, see https://youtrack.jetbrains.com/issue/WEB-19372. So you have to refresh browser page to get such breakpoints hit.

0
Comment actions Permalink

I see, do you know if this will be fixed at some point?

0
Comment actions Permalink

as it's not closed with 'Won't fix' or similar resolution, it's planned to be fixed one day. But there is no ETA for this fix. You can ask the developer when the fix can be expected by adding a comment to youtrack ticket

0

Please sign in to leave a comment.