CODEWITHSUNDEEP
javascriptdebuggingreactjs
AlexB
AlexB

Reputation: 61

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

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,

Upvotes: 6

Views: 2633

Answers (2)

Jack Vo
Jack Vo

Reputation: 319

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

Upvotes: 3

AlexB
AlexB

Reputation: 61

My mistake. Chrome debugger show the original source (jsx), not the compiled javascript.

Upvotes: 0

Related Questions