必须装React Native Tools插件,但需在项目根目录运行npx @react-native-community/cli、配置type为pwa-node的launch.json、确保adb识别设备且Hermes的sourceMap正确启用,否则调试静默失败。

React Native Tools 插件装了但 F5 按不响
插件只是个壳,不自动配 CLI、不生成可用的 launch.json、也不管你本地有没有 react-native 可执行文件。常见报错是 Error: Cannot find module 'react-native' 或卡在 Starting Packager…。
实操建议:
- 必须在项目根目录运行
npx @react-native-community/cli(不是全局安装) - 终端里手动执行
npx react-native --version,能输出版本号才算通过 - Windows 用户注意:VSCode 默认调用
react-native.cmd,若 npm 全局 bin 路径没进PATH,会提示“不是内部命令”
launch.json 里 type 字段写错,断点全灰
VSCode 1.80+ 已废弃 "type": "reactnative",继续用它会导致调试器根本连不上 Metro,所有断点变灰色且无日志。
实操建议:
- 用
"type": "pwa-node"(推荐)或"type": "node",配合runtimeExecutable指向本地 CLI - 删掉
"platform": "android"字段——它已非必需,留着反而干扰识别 - Hermes 引擎(RN 0.69+ 默认)必须加
"sourceMaps": true,且metro.config.js中要设enableSourcemapForHermes: true
点了 Debug 却等在 “Waiting for device…”
这不是 React Native 配置问题,是 VSCode 调试器底层依赖的 ADB 连不上设备。VSCode 日志不会明说,只卡住不动。
实操建议:
- 先在终端跑
adb devices,确保列出设备(不是空或????????) - 重启 ADB:
adb kill-server && adb start-server,再拔插 USB 线 - Windows 用户避开 USB-C 转接头/扩展坞,直连电脑原生 USB 口;Mac 用户慎用雷电扩展坞(会屏蔽 ADB)
- 检查
adb version≥ 1.0.41,旧版不支持 Android 12+ 设备
Chrome 调试器打不开 localhost:8081/debugger-ui
这个按钮本质是启动 react-native start 并打开 Chrome,但它不负责启动 App,也不处理端口冲突。
实操建议:
- 先手动运行
npx react-native run-android(或 iOS),等 App 启动完成再点调试按钮 - 检查是否有其他进程占了 8081 端口:
lsof -i :8081(macOS/Linux)或netstat -ano | findstr :8081(Windows) - 防火墙可能拦截了 8081,临时关闭试试;Chrome 打不开时,换 Edge 或 Firefox 直接访问
- 真机调试别指望 Chrome 查 Native 层——组件树、网络请求得用 Flipper
adb devices 和 npx react-native --version 都稳住。


















