如何调试Expo+Hermes+VSCode？安装Reanimated 2后调试失效求助

一、修正launch.json配置 #

带Hermes的调试配置必须匹配以下关键参数，否则无法连接Metro：

• request设为attach（Expo Dev Client需先启动打包器，再附加调试）
• port默认8081，若Metro用了自定义端口需同步修改
• 新增cwd指向项目根目录，避免路径解析错误
• 示例配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Hermes - Expo Dev Client",
      "type": "reactnative",
      "request": "attach",
      "port": 8081,
      "cwd": "${workspaceFolder}",
      "enableDebug": true,
      "sourceMaps": true,
      "skipFiles": ["<node_internals>/**"]
    },
    // 保留你的无Hermes配置
    {
      "name": "Debug Without Hermes",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios", // 或android
      "expo": true,
      "disableHermes": true
    }
  ]
}

二、标准化调试流程 #

1. 先执行expo start --dev-client -c清除缓存并启动Metro服务，等待服务完全就绪（看到二维码/Metro地址输出）
2. 在VSCode中选择带Hermes的配置启动调试
3. 确保设备/模拟器上的Dev Client应用已连接到当前Metro服务

三、Reanimated 2调试专属注意事项 #

• Reanimated的worklet代码运行在后台线程，断点触发可能有延迟，需耐心等待
• 原生层动画逻辑无法通过JS调试器查看，需用Xcode/Android Studio调试原生项目
• 重新构建Dev Client：执行expo run:ios或expo run:android，确保Reanimated与Hermes的集成生效

四、连接失败排查 #

• 检查端口占用：Mac/Linux执行lsof -i :8081，Windows执行netstat -ano | findstr :8081，杀掉占用进程后重启Metro
• 更新VSCode的React Native Tools插件到最新版本
• 确认babel.config.js中Reanimated插件放在最后一位：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

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