如何在VSCode安装后配置 React Native 的开发调试环境-VSCode-PHP中文网

必须装react native tools插件，但需在项目根目录安装npx @react-native-community/cli、配置type为pwa-node的launch.json、确保adb识别设备且hermes的sourcemap正确启用，否则调试静默失败。

如何在vscode安装后配置 react native 的开发调试环境

React Native Tools 插件必须装，但装完不等于能用

装了 React Native Tools 只是第一步，它本身不带调试器、不自动配环境变量、也不生成有效 launch.json。很多用户装完就按 F5，结果报错 Error: Cannot find module 'react-native' 或直接卡在 “Starting Packager…” —— 这是因为插件没和本地 CLI 或项目绑定。

务必在项目根目录下安装（不是全局）：npx @react-native-community/cli（新版推荐，替代已废弃的 react-native-cli）
插件依赖 node_modules/.bin/react-native 路径，所以 npx react-native --version 必须能在终端中运行成功
Windows 用户注意：插件默认调用 react-native.cmd，若 npm 全局 bin 路径未进 PATH，会提示“不是内部命令”

launch.json 配置错一个字段，断点就全失效

launch.json 里最常出问题的是 platform 和 type 字段。旧版文档写 "type": "reactnative"，但 VSCode 1.80+ 已弃用该类型；新版必须用 "type": "pwa-node" 或 "type": "node" 配合 Metro 启动逻辑，否则断点永远灰色。

React Component Auditor

审计 React 组件的性能、可访问性、Hook 正确性、属性设计和重渲染优化——识别 memo 优化点和状态管理方案

下载

正确配置片段（Android）：

{
  "name": "Debug Android",
  "type": "pwa-node",
  "request": "launch",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-native",
  "args": ["run-android", "--no-packager"],
  "console": "integratedTerminal",
  "env": { "NODE_ENV": "development" }
}

"platform": "android" 不再是必需字段，删掉或留空更安全；真机调试时反而要加 "env": { "REACT_NATIVE_PACKAGER_PORT": "8081" }
如果用 Hermes 引擎（RN 0.69+ 默认），需额外加 "sourceMaps": true 并确保 metro.config.js 中 enableSourcemapForHermes: true

adb 设备识别失败，VSCode 调试器根本连不上

VSCode 的 React Native 调试器底层靠 adb 把 JS bundle 推到设备、监听 WebSocket 端口。一旦 adb devices 列不出设备，整个调试链就断了 —— 此时 VSCode 日志里只显示 “Waiting for device…”，不会报具体错误。

检查 adb 是否在 PATH：运行 adb version，失败就补 ANDROID_HOME/platform-tools 到系统环境变量（Windows 建议用绝对路径，如 C:\Users\Name\AppData\Local\Android\Sdk\platform-tools）
模拟器启动后执行 adb connect localhost:5555（部分 AVD 启动后不自动注册）
真机 USB 调试开启后，仍显示 unauthorized：拔插 USB → 在手机弹窗点“允许” → 若无弹窗，删掉电脑 ~/.android/adbkey* 重连
VSCode 底部状态栏点击 React Native 图标，能实时看到设备列表；没显示设备，说明 adb 层就没通

热重载正常但断点不触发，大概率是 Hermes + SourceMap 没对齐

RN 0.69 开始默认启用 Hermes，它把 JS 编译成字节码，原始源码映射靠 SourceMap。VSCode 断点停不住，常见原因是 Metro 没生成或没加载对应 Map 文件，而不是代码写错了。

确认 metro.config.js 包含：

module.exports = {
  transformer: {
    enableSourcemapForHermes: true,
  },
};

首次调试前清空缓存：npx react-native start --reset-cache，否则旧 Map 文件残留导致断点错位
Chrome DevTools 能断住，但 VSCode 不行？说明调试通道走的是 Chrome 协议而非 VSCode 内置 Node Debugger —— 关掉 “Debug JS Remotely”，改用原生调试模式
断点打在 JSX 或 Hooks 里无效？优先打在普通函数体内部，避免打在顶层组件声明或 useEffect 回调外层

真正卡住人的从来不是装几个插件，而是 adb 没认设备、launch.json 类型写错、Hermes 的 SourceMap 没生效这三处 —— 它们不报红错，只让调试静默失败。