React Native 0.76.2新项目中React Native Debugger无法连接求助

1. 手动触发应用的远程调试连接 #

在模拟器/真机上打开应用的开发者菜单：

• iOS：Cmd + D（模拟器）或摇晃设备
• Android：Cmd + M（模拟器）或摇晃设备
  选择 Debug Remote JS 选项，此时应用会尝试连接已启动的React Native Debugger，观察调试器窗口是否出现连接提示。

2. 确保React Native Debugger监听正确端口 #

启动RND时明确指定端口（匹配Metro默认的8081），在macOS终端执行：

open -a "React Native Debugger" --args --port 8081

如果Metro使用了非默认端口（比如8082），将命令中的端口号替换为对应值。

3. 检查Hermes调试兼容性 #

React Native 0.76.2默认启用Hermes引擎，需确认调试配置正确：

• 对于iOS：在Xcode中打开项目，确保Build Settings里的Hermes Enabled为YES，且Debug Information Format设置为DWARF with dSYM File
• 对于Android：检查android/app/build.gradle中enableHermes为true（默认已开启）

4. 修改Metro配置以支持调试器连接 #

在项目根目录的metro.config.js中添加调试相关配置：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {
  server: {
    port: 8081,
    enhanceMiddleware: (middleware) => {
      return middleware;
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

保存后重启Metro bundler：npx react-native start --reset-cache

5. 检查macOS防火墙与权限 #

• 打开「系统设置」→「网络」→「防火墙」，确认允许React Native Debugger和node（Metro进程）通过防火墙
• 若使用VPN或代理，暂时关闭后重试连接

6. 尝试更新/降级React Native Debugger #

React Native Debugger v0.14.0可能与RN 0.76存在兼容性问题：

• 下载最新稳定版（或nightly版本）的RND安装后重试
• 若最新版仍有问题，尝试降级至v0.13.0版本测试

7. 验证调试协议兼容性 #

在RND的菜单中选择「Debugger」→「Enable React Native Debugging」，确保该选项已勾选；同时检查「Network」→「Enable Network Inspect」是否开启。

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