使用浏览器/插件调试 JSX答案

【问题标题】：Debugging JSX using browser / plugins使用浏览器/插件调试 JSX
【发布时间】：2015-02-15 11:16:06
【问题描述】：

有没有办法调试 JSX 文件？

当我在 safari / chrome 中检查资源选项卡时，我无法看到 .jsx 文件。我们可以使用调试器吗？

【问题讨论】：

【解决方案1】：

安装后Chrome Extension 打开 devTool (f12) 可以看到：

注意：可能需要重新启动 chrome 才能运行

【讨论】：

【解决方案2】：

Chrome Extension 向开发者工具添加了另一个选项卡并允许调试 React 组件。您可以在React documentation 中查看预览并了解更多信息。

【讨论】：

缺少 chrome 扩展反应选项卡
@Joti 您确定扩展已正确安装并且您正在使用 React 在应用程序上打开开发工具吗？有时我必须在打开 devtools 的情况下刷新整个页面才能让它识别 React 应用程序。如果您的问题仍然存在，请在 Github 上提交问题。
我重新安装它并且它正在工作 - 但我仍然无法设置断点，有没有办法调试 js 代码？还是我应该只从 .js 文件中调用 js 代码？

【解决方案3】：

如果你使用webpack，那么你可以在webpack.config.js里面提供devtool的配置。

module.exports = {
    devtool: 'source-map'
   // rest of the webpack configurations
}

它将保留原始源代码。您可以在浏览器开发人员工具的源选项卡下查看此源代码。（如果您使用的是 chrome/firefox，则可以在源选项卡中按Ctrl + P 快速搜索您要调试/分析的文件。）

更多关于 webpack 开发工具here。

希望这会有所帮助:)

【讨论】：

【解决方案4】：

如果您使用 -d 进行浏览和监视，将有助于生成源映射，然后您可以跟踪导致错误的文件。

【讨论】：