为什么在chrome中调试jsx如此不稳定？

Question

我们正在构建一个React / Flux应用程序，一切都在运行并且工作正常，除了调试体验在Chrome中是可怕的！

当尝试在这样的合法行上设置断点时：

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

断点跳了几行。或者看起来断点设置正确，但是当你运行页面时，断点不再是你想象的那样。

我们安装了React Dev工具，它在新的选项卡“React”选项卡中为我们提供了一些不错的功能，但标准的“Sources”选项卡无法正常工作。

我们尝试设置type =“text / jsx”以查看Chrome是否能更正确地理解该文件，但这导致jsx文件甚至无法加载...可能是IIS的错误，但不是Chrome。

React看起来很棒，但似乎jsx还没有得到很好的支持。是否有另一个chrome扩展可以使jsx调试工作更好？

我们也可以做服务器端的反应，并尝试以js文件而不是jsx结束，但这似乎是另一种蠕虫......特别是在ASP.NET MVC中

Answer 1

只要生成了源地图，Chrome调试器和JSX就没有任何问题。

您可能会注意到我在此屏幕截图中也使用了ES6，也没有任何问题。