How to debug this on webstorm about react-hot-boilerplate HOT 13 CLOSED

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

from react-hot-boilerplate.

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

from react-hot-boilerplate.

I have found this issue webpack/webpack#238 but it was no help

from react-hot-boilerplate.

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.

from react-hot-boilerplate.

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

from react-hot-boilerplate.

@prigara really appreciate you chiming in here!

from react-hot-boilerplate.

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

from react-hot-boilerplate.

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.

from react-hot-boilerplate.

@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

from react-hot-boilerplate.

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

from react-hot-boilerplate.

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.

from react-hot-boilerplate.

@develar FYI there's a comment saying that WebStorm 11 doesn't seem to solve the issue webpack/webpack#238 (comment)

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 :/

from react-hot-boilerplate.

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.

from react-hot-boilerplate.