Debug React.js source code, not the react's DOM?

Question

Is there a way to set a breakpoint in the actual React.js code, and to debug this code.

E.g.:

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>; // Here goes breakpoint
  }
});

React.render(<HelloMessage name="John" />, mountNode);

I mean debugging the actual React code rather then the compiled javascript code. Is there any solution (a plugin for a browser, any IDE supporting this)?

I know that when they talk about debugging react they mean the ability to see the React's shadow DOM. The question is about debugging the actual script code.

Thank you,

Answer 1

Have you tried to add debugger directly inside .jsx file? It works for me every single time