Webstorm Webpack debugging

Has anyone gotten webstorm to debug properly with webpack?  The source maps created by webpack don't seem to work with webstorm.  They work in firefox.  Thanks

9 comments

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

0

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.

0

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

0

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

0

>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

0

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

Eric

0

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

1

Please sign in to leave a comment.