Why is debugging jsx in chrome so wonky?

Question

We're building a React/Flux application and everything is running and works fine, except the debugging experience is HORRIBLE in chrome!!

When trying to set breakpoints on legit lines like this:

ReactDOM.render(React.createElement(AccountInfo, null), document.getElementById('AccountInfoContainer'));

The breakpoint jumps down a few lines. Or it looks like the breakpoint is set properly, but when you run the page the breakpoint is no longer where you thought it was going to be.

We installed the React Dev tools, which gave us some nice functionality in a new tab "React" tab, but the standard "Sources" tab is just not working right.

We tried setting type="text/jsx" to see if Chrome would understand the file more correctly, but that resulted in the jsx file not even loading...could be the fault of IIS though not Chrome.

React seems so great, but it appears as though jsx really isn't supported all that well yet. Is there another chrome extension that will make jsx debugging work better?

We could also do server-side react rending and try to end up with a js file instead of jsx, but that seems like another can of worms...especially in ASP.NET MVC

Answer 1

I don't have any issues with the Chrome debugger and JSX as long as Source Maps have been generated.

You may notice I am also using ES6 in this screenshot, also without any issue.