How to debug this on webstorm

[Agamennon]

i have added devtool: "eval" to the webpack.config, but i still not able to make a breakpoint hit on webstorm, i created the debug config pointed at http://localhost:3000, i dont know how to debug this, any ideas?

[gaearon]

Do you mean from inside Webstorm? It has an embedded debugger?

[Agamennon]

kind of, it uses the chrome debugger via a chrome extension but from inside the IDE, it has worked for everything until now.

[Agamennon]

I have found this issue https://github.com/webpack/webpack/issues/238 but it was no help

[prigara]

Adding

    new webpack.SourceMapDevToolPlugin(
        '[file].map', null,
        "[absolute-resource-path]", "[absolute-resource-path]")

to the list of plugins in webpack.config.js helped - WebStorm was able to stop on the break point in app.js file. However, I'm haven't checked whether it works for a more complex app structure and relative source map paths like in webpack/issues/238

There's a related issue on WebStorm tracker - WEB-14000, we'd be happy if you provide more details there.

[Agamennon]

hum , it does not seem to work, it does stop at app.js but its not working correctly (no values), please try this. make your App.js like this:

import React from 'react';

export default class App extends React.Component {

  handleClick() {
    var x = 2;
    var y = x ;
    console.log(x);
  }

  render() {

    return (
        <div  onClick={this.handleClick}>
          <h1>Hello, world.</h1>
        </div>
    );
  }
}

place a breakpoint on var y =x; click hello world and tell me what happens

[gaearon]

@prigara really appreciate you chiming in here!

[Agamennon]

by removing devtool: 'eval' from webpack.config.js i was able to make it work, but... if for instance i add a variable on the render function to be like this:

render() {
    var test = 10;
    return (
        <div  onClick={this.handleClick}>
          <h1>Hello, world.</h1>
        </div>
    );
  }

and place my break point on var test = 10 refesh the app, i will not hit my App.js file and will be thrown to the bundle, and in the wrong place. i also try creating a constructor and adding breakpoints there to the same results

[prigara]

It does stop (haven't removed 'eval' option yet), but variables are shown undefined. We'll have a closer look, but it seems that that the issue related with the way WebStorm handles Webpack sourcemaps.

[Agamennon]

@prigara i will chime in on the webstorm ticket, when you remove devtool: 'eval', for me in the click example it will stop and show values correctly, unfortunately you can't debug the render function or the constructor as i previously stated

[threepointone]

could you try replacing 'eval' with 'eval-source-map'? (and maybe remove SourceMapDevToolPlugin)

[develar]

WebStorm 11 (EAP will be soon) support webpack debugging – https://youtrack.jetbrains.com/issue/WEB-14000. Feel free to ping me in case of problems.

[amcsi]

@develar FYI there's a comment saying that WebStorm 11 doesn't seem to solve the issue https://github.com/webpack/webpack/issues/238#issuecomment-136362450

I'm having trouble with this too by the way. And I'd be happy to assist in any experiments. I just really want to be able to debug sourcemapped webpacked nodejs files in WebStorm :/

[gaearon]

There’s nothing we can do in this repo to solve this so I’m closing. Please feel free to follow up with WebStorm folks or Webpack.