Webstorm Webpack debugging

Same issue here. I posted this stackoverflow question: http://stackoverflow.com/questions/37861032/webstorm-debug-not-working-with-webpack-and-grunt?noredirect=1#comment63179680_37861032

I don't think it's the same issue - when original issue was created, there was no support for webpack debugging. Now, 2 years later, it is supported (and works). Please provide a project that shows up the issue

Where can I find the most recent instructions for configuring the debugger of Webstorm 2016-3 to work with webpack and React? As for webpack I found this:

https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ 

The example https://github.com/prigara/debugging-webpack worked for me out of the box without adjusting any source map - thanks for that!

However, as soon as React or any framework that makes use of babel is involved I got stuck. For React Native I found this resource: https://blog.jetbrains.com/webstorm/2016/10/webstorm-2016-3-eap-163-6512/ 

For React (non-Native), though, I couldn't find any instructions. So I was looking for the more general case "debugging in WebStorm with babel" where I found this screencast: https://www.youtube.com/watch?v=gxCCXXcqJfw 

Unfortunately, this didn't work either. It would be great to have a minimal example like the one mentioned above from github, but  involving in addition to webpack also babel or more specifically React.

Sorry, but there are no instructions that would suite all possible configurations.
Please see http://richb-hanover.com/debugging-webpack-apps-with-webstorm-2016-1/ for some hints on setting up React+webpack debugging..

For default application created with create-react-app, I was able to make debugging work by setting `webpack:///src` Remote URL mapping for `src` root. But there are 2 problems here:

• you need to refresh your browser once application is loaded to get breakpoints hit: when using sourcemaps, breakpoints in code that is executed on page loading don't immediately work unless the page is hosted on built-in webserver, see https://youtrack.jetbrains.com/issue/WEB-19372.

• sourcemaps generated by React build process that uses 'cheap-module-source-map' are not accurate, so not all breakpoints are correct: for example, for breakpoint on line 6 in App.js (render() {) line 18 is returned (you can check this in Dev Tools), breakpoint on line 8 in index.js (document.getElementById('root')) can't be hit at all

You can eject dependencies (npm run eject) and then edit config/webpack.config.dev.js to change 'cheap-module-source-map' to 'source-map';in this case, no remote URL mappings are required at all - debugging will work out of the box. But still not all line numbers returned will be correct - for example, when setting breakpoint on in

export default App;

App.js, you will actually create it in bundle.js

Elena said: "I was able to make debugging work by setting 'webpack:///src' Remote URL mapping for 'src' root.

Does that statement apply to debugging a node.js application in WebStorm bundled by Webpack?  I have "devtool" set to "source-map", which helped with breakpoints but stack traces still referred to the bundle.  Then I found "source-map-support" and applied it using webpack.BannerPlugin, and that got me closer, but the lines for my code in stack traces look like:

(C:\jmpdev\usr\sasewh\Node\ServerNext\webjmp\build\webpack:\app_server\controllers\packages.js:351:1)

I feel like I need to map "webpack:" to "..\src\server" somehow.  Any idea how I go about doing that?

Thanks,

Eric

>Does that statement apply to debugging a node.js application in WebStorm bundled by Webpack?

When using Node.js run configuration, you can't specify remote URL mappings, so - no. And breakpoints do work for you already, which indicates that the IDE can map your source files to generated bundle.

However, Webstorm has no means to control webpack output - stack traces are produced by webpack, not by the IDE. and there is no way to specify custom filters to map files in traces to actual source files

Okay, thanks very much, I shall bark up a different tree.

Eric

In case anyone stumbles across this thread trying to get correct source-mapped stack traces when debugging the back-end of a webpack-bundled node.js application, with WebStorm or perhaps anything else, here is where I ended up:

1. Rather than using devtool: 'source-map' in your webpack config, use the plug-in:

   plugins: [

    // https://webpack.js.org/plugins/source-map-dev-tool-plugin/
    new webpack.SourceMapDevToolPlugin({
      filename: "[file].map",
    }),

  ],

      This by itself will result in paths like:

             at module.exports.featured (webpack:///../app_server/controllers/packages.js?:351:6)

     The module and line numbers are correct, but WebStorm will not know what to do with "webpack:///".  But read on.

2.  Add a line to the output section of your webpack config file that sets devtoolModuleFilenameTemplate to '[absolute-resource-path]':

output: {
  path: path.resolve(__dirname, '../build'),
  filename: 'bundle-[name].js',
  devtoolModuleFilenameTemplate: '[absolute-resource-path]',  // <----- This!
},

Line in stack trace after doing that will look like:

at module.exports.featured (C:\root\usr\eric\Node\ServerNext\project\src\server\app_server\controllers\packages.js:351:6)

and, since it's a valid path, WebStorm will turn it into a clickable link to the original source line!

That took way longer than it should have to figure out!  I hope it helps someone.

Eric

Great, thanks for posting it!