为什么在 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 调试工作得更好？

我们也可以进行服务器端 React 渲染并尝试以 js 文件而不是 jsx 结束，但这似乎是另一种蠕虫病毒......尤其是在 ASP.NET MVC

Answer 1

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

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