我之前在React Native开发时也碰到过一模一样的问题，折腾了好一会儿才找到原因，给你列几个最靠谱的排查方向：

• 检查Sources面板的视图设置
  有时候不是文件没加载，是被视图设置隐藏了。打开Chrome的Sources面板后，先看看左侧导航栏是不是被折叠了（点击面板左上角的箭头展开）；然后检查有没有勾选Hide ignored sources选项——这个选项默认可能会把RN的开发文件归到忽略列表里，取消勾选就能看到了。另外，切换到Page标签，展开下面的localhost（或对应调试域名），项目的源文件一般就藏在这里面。

• 确认调试连接是否正常建立
  先关闭当前的调试标签页，回到RN项目重新点击Debug JS Remotely，等Chrome新标签页打开后，看地址栏是不是http://localhost:8081/debugger-ui/（或对应你的端口）。同时看看项目终端有没有报错，比如端口被占用的提示，如果有的话，换个端口重启项目：

react-native start --port 8082

重启后再重新连接调试试试。

• 清除Chrome的缓存和调试器缓存
  浏览器缓存经常会搞出奇怪的问题。打开Chrome开发者工具，右键点击地址栏的刷新按钮，选择「Empty Cache and Hard Reload」；或者直接清除浏览数据，只勾选「缓存的图片和文件」，然后重启浏览器再连接调试。

• 排查版本兼容性问题
  有些旧版React Native和新版Chrome可能存在兼容性冲突。如果你的RN版本比较老，建议升级到最新的稳定版；如果不想升级RN，也可以试试把Chrome降级到稍旧的稳定版本（不过优先推荐升级RN）。另外，尽量用官方的Chrome浏览器，别用小众的Chrome内核浏览器。

• 禁用Chrome扩展程序
  广告拦截器、隐私类插件这类扩展可能会干扰调试连接。你可以先打开Chrome的隐身模式，在隐身模式下启动调试——如果文件能正常显示，就逐个排查你安装的扩展，找到冲突的那个禁用掉就行。

• 检查项目的配置文件
  如果你的项目自定义了babel或metro配置，可能不小心关闭了源码映射：

  • 检查metro配置（一般是metro.config.js），确保sourceMap选项设为true；
  • 检查babel配置（babel.config.js或.babelrc），确认没有移除@babel/plugin-transform-react-jsx-source这类生成源码映射的插件。

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