如何在VSCode中捕获React Native CLI项目的断点？

我之前切换到React Native CLI项目时也碰到过一模一样的断点问题，结合我的调试经验，给你几个针对性的解决步骤：

1. 修复launch.json的React Native环境选项缺失问题 #

如果你创建launch.json时看不到React Native环境选项，大概率是VSCode没正确识别项目类型或者插件未激活：

• 先完全关闭VSCode，重新打开项目，确保React Native Tools插件已经正常加载（可以在扩展面板里查看插件状态）
• 如果还是不行，手动创建/修改.vscode/launch.json，添加适合CLI项目的配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Metro",
      "type": "reactnative",
      "request": "attach",
      "port": 8081,
      "sourceMaps": true
    },
    {
      "name": "Launch Android",
      "type": "reactnative",
      "request": "launch",
      "platform": "android"
    }
  ]
}

2. 确保调试前的必要配置都到位 #

• 再次确认安卓模拟器里已经开启Debug JS Remotely：摇一摇模拟器（或者按Ctrl+M/Cmd+M）打开开发者菜单，勾选这个选项
• 先清理metro缓存再启动服务，避免缓存导致的调试异常：

  npx react-native start --reset-cache
  

  之后再执行npx react-native run-android启动应用

3. 匹配调试配置和启动方式 #

• 如果你习惯用npm start+npx react-native run-android手动启动：
  1. 先启动metro服务和应用，确保应用已经成功连接到metro（模拟器里能正常加载JS代码）
  2. 在VSCode里选择Attach to Metro配置，启动调试会话，此时应该能正常捕获断点
• 更省心的方式是用Launch Android配置：直接在VSCode里启动这个调试会话，它会自动帮你启动metro服务并安装运行安卓应用，断点调试的兼容性更好

4. 排查插件和版本兼容性 #

• 检查React Native Tools插件是否是最新版本，在扩展面板里找到插件点击“更新”，更新后重启VSCode
• 确保你的React Native CLI版本和插件版本兼容，如果是较新的CLI版本，插件也需要保持最新才能适配

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