VSCode 不运行 React Native 应用,仅调度调试会话;真机调试失败主因是底层环境未通——adb 未识别设备、metro 未启动或未启用调试模式。

VSCode 本身不运行 React Native 应用,也不负责连接手机;它只调度调试会话、显示日志、打断点。真机调试失败,90% 是底层环境没通——不是 VSCode 配错了,而是 adb 没识别设备、metro 没跑起来、或开发者菜单根本没进调试模式。
adb devices 不显示手机?先别碰 launch.json
VSCode 的 “React Native: Run Android” 命令本质是调用 npx react-native run-android,而后者依赖 adb。如果 adb devices 输出为空或 ????????,VSCode 再怎么配都白搭。
- 确认手机已开启「USB 调试」和「USB 安装」;华为/小米/OPPO 等厂商还需关闭「MIUI 优化」或启用「USB 调试(安全设置)」
- 执行
adb kill-server && adb start-server,再拔插 USB 线(优先直连电脑原生 USB 口,避开扩展坞) - 运行
adb version,确保 ≥1.0.41;旧版 ADB 在 Android 12+ 上会静默失败 - Windows 用户若用 USB-C 转接头,换线或换口;Mac 用户注意雷电扩展坞可能屏蔽 ADB 通信
断点不触发?检查是否真进了调试通道
点击 VSCode 的 ▶️ 启动调试,不等于 JS 线程就准备好接收断点了。React Native 的调试器必须由 App 主动 attach 到 VSCode,而不是反向连接。
- 先手动运行
npx react-native run-android(或run-ios),等 App 完全启动并处于前台 - Android:摇动设备 / 按两下 R 键 → 调出开发者菜单 → 点「Debug」;iOS:晃动设备 → 「Debug」→ 「Open debugger」
- 此时 Chrome 会打开
http://localhost:8081/debugger-ui/,VSCode 才能注入调试器;如果打不开,说明metro没运行或端口被占 - 删掉插件自动生成的
.vscode/launch.json,改用 VSCode 内置的JavaScript Debug Terminal运行npm start更稳定
Expo 项目用 VSCode 调试?别装 React Native Tools
Expo 和原生 React Native CLI 是两套运行时,调试机制完全不同。装 React Native Tools 不仅无效,还会和 Expo Go 插件冲突。
- 卸载
React Native Tools(已停止维护,对 Expo 支持极差) - 安装官方
Expo Go插件(图标是蓝白 E),确保 VSCode 版本 ≥1.75 - 运行
npx expo start,等控制台输出› Metro waiting on http://localhost:19002后,再启动调试 - 在
.vscode/launch.json中确认url字段为http://localhost:19002(不是 19000);真机调试需手机与电脑在同一局域网,且防火墙放行 19002 端口
热重载没反应?别怪 VSCode,看 Metro 和开发者菜单
VSCode 不控制热重载(Hot Reloading),那是 Metro 的能力。保存后无变化,大概率是通道没开,或你根本没启用 Hot Reloading。
- 摇出开发者菜单 → 确认「Enable Hot Reloading」已勾选(注意:不是「Live Reload」)
- Hot Reloading 对函数组件友好,但改类组件的
state结构、新增生命周期方法时仍需手动 Reload - 检查 Metro 终端是否有
Unable to resolve module报错——常见于路径大小写错误,或未安装@babel/preset-react - Android 真机加载慢?可加
adb reverse tcp:8081 tcp:8081加速 JS Bundle 传输(仅限 Android)
最常被忽略的一点:所有调试行为都建立在 metro 正常运行 + 设备已识别 + App 已进入调试模式 三个前提之上。VSCode 只是那个“按开关的人”,别让它背设备连不上、端口被占、配置文件写错的锅。











