Chrome调试React项目：如何单步执行React库原始源码而非编译文件？

• 确认使用React开发构建版本

  • 确保项目依赖的react和react-dom是开发版，而非生产压缩版。npm/yarn默认安装的就是开发版，若手动引入文件，要选择带development后缀的（比如umd/react.development.js），避开.prod.js结尾的生产文件。
  • 可查看项目package.json的依赖列表，确认未指定生产版包。

• 开启Chrome DevTools的源码映射

  • 打开Chrome开发者工具（快捷键F12或Ctrl+Shift+I），点击右上角齿轮图标进入设置。
  • 在Sources分类下，勾选Enable JavaScript source maps和Enable CSS source maps选项。

• 定位React原始源码

  • 在DevTools的Sources面板左侧，展开webpack://或vite://（对应你的构建工具）目录，找到node_modules/react或node_modules/react-dom文件夹，里面就是未编译的原始源码文件（如.js/.ts格式）。
  • 也可直接用面板顶部的搜索框，搜索React.js、ReactDOM.js等核心文件名快速定位。

• 添加断点并调试

  • 在找到的原始源码文件中，点击目标行号添加断点，操作和调试自有代码一致。
  • 当业务代码触发React相关逻辑时，断点会命中，此时可使用F10（单步跳过）、F11（单步进入）等快捷键进行调试，查看变量、调用栈等信息。

• 补充提示

  • 若使用Create React App、Vite等官方脚手架，默认已配置好源码映射，直接按上述步骤操作即可。
  • 若源码映射未生效，可检查项目构建配置：比如webpack的devtool需设置为source-map或eval-source-map，确保生成了正确的源码映射文件。

内容的提问来源于stack exchange，提问作者seifeslimene