在调试 react 应用程序时，如何检查从 JSX 编译的源代码？

How can I inspect the source compiled from JSX when debugging a react app?

提问人：Harry Zumwalt 提问时间：11/12/2023 最后编辑：Harry Zumwalt 更新时间：11/20/2023 访问量：62

问：

这篇博文描述了一种在单步执行 react 应用程序时查看 JSX 转换结果的方法，但它有点过时了（使用通过脚本加载的旧 api）。当使用从 create-react-app （[email protected] & [email protected]） 生成的 react 应用程序的干净副本时，调用堆栈中似乎没有我可以用来检查编译的源代码。ReactDom.render()text/babeltransform.run

还有没有办法用当前的 react/babel 版本做这样的事情？

reactjs 调试 babeljs google-chrome-devtools

评论

答：

0赞 natashap 11/17/2023 #1

对于每个 JSX 文件，都会在右侧选项卡的 Sources -> 下生成一个 main.xxxxx.js 文件。

enter image description here

1赞 Stefano Balzarotti 11/20/2023 #2

在浏览器开发人员工具设置下禁用 javascript 源映射。 然后，当您调试时，您将看到编译后的源代码。

上一个：Langchain predict 函数调用解析错误

下一个：在调试 react 应用程序时，如何检查从 JSX 编译的源代码？