如何在VSC中调试React Native Expo应用 打包器连接后断点不触发

标准连接操作步骤 #

• 本地执行npx expo start启动packager，确认终端输出的服务端口号，默认端口为19000
• 安卓模拟器中打开Expo Go应用，加载对应待调试项目，确认应用可正常运行无加载报错
• 配置VS Code调试规则，在.vscode/launch.json中添加如下配置：

{
  "name": "Attach to packager",
  "request": "attach",
  "type": "reactnative",
  "cwd": "${workspaceFolder}",
  "port": 19000,
  "sourceMaps": true
}

• 调试面板选择上述配置启动调试器，等待控制台输出连接成功提示
• 呼出模拟器中Expo应用的开发者菜单，点击开启远程JS调试，等待应用自动重连
• 在对应业务代码处添加断点，触发对应页面逻辑即可命中断点

断点未触发排查方案 #

• 校验packager实际运行端口与配置文件的port字段是否一致，端口被占用时Expo会自动顺延端口，需同步修改配置
• 确认断点添加在JS/TS业务层代码中，原生模块代码无法通过该调试方式触发断点
• 补充sourceMaps: true配置，关闭sourceMap会导致代码映射失败，断点无法正常命中
• 尝试关闭远程调试后重启Expo应用，重新开启远程调试再测试断点
• 可在目标代码处插入debugger语句，运行到该位置时会强制触发暂停，验证调试链路是否正常

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