我之前在WebStorm 2018调试老React Native项目时，也碰到过完全一样的状况！给你几个亲测有效的排查和解决步骤：

• 先确认应用端已开启远程调试
  别光开了bundler就完事，得在模拟器/真机里摇晃设备调出开发者菜单，选择「Debug JS Remotely」。这一步会让React Native主动和Chrome建立连接，要是没开这个，Chrome肯定是空白的，WebStorm也会一直等连接。

• 手动配置Chrome的调试目标端口
  WebStorm提示的localhost:55391是它监听的调试端口，你需要让Chrome识别这个端口：

  1. 打开Chrome，输入chrome://inspect/#devices进入调试页面
  2. 点击页面底部的「Configure」按钮
  3. 在弹出的对话框里添加localhost:55391，然后点击「Done」
  4. 稍等几秒，看看页面里会不会出现React Native的调试目标，要是有就点击「Inspect」，应该就能正常加载调试页面了

• 检查WebStorm的调试配置细节
  打开WebStorm的「Run/Debug Configurations」，找到你的React Native配置：

  • 确认「Before launch」里只有「React Native bundler」这一项（你已经取消了构建启动应用，这步没问题，但再核对下）
  • 查看「Remote debugging port」是不是和提示的55391一致，要是不一致改成相同的端口；或者试试换成React Native默认的8081（有些老项目默认用这个）
  • 确认「Target device」选对了，是你正在用的模拟器/真机，WebStorm能正常识别到设备

• 清理缓存+重启所有服务
  老项目缓存坑多，执行这个命令重启bundler：

  react-native start --reset-cache
  

  然后关掉WebStorm、Chrome和模拟器/真机，重新打开后再尝试调试，很多时候缓存问题重启就解决了

• 适配Chrome版本（针对WebStorm 2018的兼容性）
  WebStorm 2018比较老旧，和新版本Chrome的调试协议可能不兼容：

  1. 打开Chrome的chrome://flags页面
  2. 搜索「Legacy JavaScript debugger」，把它设置为「Enabled」
  3. 重启Chrome后再尝试调试，要是还是不行，可能得换个和WebStorm 2018同期的Chrome版本（比如Chrome 70-80左右）

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