Javascript 使用浏览器/插件调试JSX

有没有办法调试JSX文件

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

它为开发人员工具添加了另一个选项卡，并允许调试组件。您可以在中查看预览并阅读有关它的更多信息

---

.

使用

-d的Browserify和watchify将有助于生成源代码映射，如果您使用它们来构建源代码，则可以跟踪导致错误的文件。
安装
打开devTool（f12），您可以看到：

新的react选项卡-用于检查react元素（如常规检查）

在source选项卡（左面板）中，一个新的应用程序列表，您可以在其中查看JSX文件并在代码中设置断点

注意：如果您使用的是webpack，则可能需要重新启动chrome才能正常运行
，然后您可以在
webpack.config.js
中提供
devtool
配置

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

它将保留原始源代码。您可以在浏览器开发人员工具的“源”选项卡下查看此源代码。（如果您使用的是chrome/firefox，则在源代码选项卡中，您可以按Ctrl+P

快速搜索要调试/分析的文件。）

更多关于webpack devtool的信息

---

希望这有帮助：）

否，因为浏览器执行的是javascript而不是jsx文件。相关帖子-chrome extension react选项卡为missing@Joti您确定扩展已正确安装并且正在使用React打开应用程序上的devtools吗？有时我不得不打开devtools刷新整个页面，才能让它成为一个应用程序。如果您的问题仍然存在，请在Github上提交一个问题。我重新安装了它，它可以正常工作-但我仍然无法设置断点，有没有办法调试js代码？或者我应该从.js文件中调用js代码吗？