React Native Chrome Debugger：如何在Chrome调试器中查找JS文件？

我经常帮团队成员解决这个问题，其实找文件的路径很明确，分几种情况来看：

• 直接用搜索快速定位
  打开Chrome DevTools的Sources面板后，按下Cmd+P（Mac）或Ctrl+P（Windows/Linux），直接输入你要找的JS/TS文件名，就能快速搜到对应的文件——这是我最常用的方法，比一层层找目录高效多了。

• 在Sources面板的目录树里查找
  如果想浏览整个项目结构，在Sources左侧的文件列表里，找以下几个入口：

  • 大部分情况下，源码会在webpack://或者localhost:8081（RN默认的Metro调试端口）目录下，展开后就能看到你项目里的src或者其他源码文件夹；
  • 如果你用了RN新架构或者Metro的最新配置，可能要找metro://开头的目录，里面会映射你的项目源码。

• 先确认调试连接是否正常
  要是完全看不到任何项目文件，先检查下设备上的开发者菜单：模拟器按Cmd+D（Mac）/Ctrl+M（Windows），真机摇一摇，确保勾选了Debug JS Remotely选项。只有开启远程调试，Chrome才会和Metro服务建立连接，加载你的源码文件。

• 处理生产包或混淆后的情况
  如果是在调试生产打包的应用（比如用了npx react-native run-android --release），源码会被压缩成index.bundle，这时候看不到单独的JS文件。建议切换到开发模式调试；如果必须调试生产包，记得在Metro配置里开启sourceMap: true，这样Chrome能通过source map映射回原始源码。

• 清除Metro缓存试试
  有时候Metro的缓存会导致文件没有同步到调试器，你可以在终端停止Metro（按Ctrl+C），然后运行npx react-native start --reset-cache清除缓存后重启，再重新打开调试器试试。

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