Expo React Native应用无法连接React Native Debugger问题求助

核心配置修正 #

当前故障的核心原因是端口配置错误：19000是Metro的Expo服务入口、19002是Expo Dev Tools的Web控制台端口，都不是React Native Debugger的监听端口，同时开两个Debugger窗口抢占这两个端口会直接触发WebSocket握手400、连接拒绝错误。
版本匹配规则：Expo SDK 44 + RN 0.68.2 适配 React Native Debugger 0.12.1，默认监听端口为8081。

操作步骤 #

1. 清理冲突进程，重置服务 #

• 关闭所有React Native Debugger窗口，执行命令杀掉端口占用进程：

  # macOS/Linux
  lsof -ti:19000,19002,8081 | xargs kill -9
  # Windows
  for /f "tokens=5" %a in ('netstat -aon ^| findstr ":19000 :19002 :8081"') do taskkill /f /pid %a
  

• 进入项目根目录，执行npx expo start -c 清除Metro缓存后重启服务，不要加生产构建参数。
• 启动React Native Debugger，按Cmd+Opt+I（macOS）/Ctrl+Alt+I（Windows）打开配置面板，将监听端口设置为8081，保存后重启Debugger。

2. 设备端调试连接 #

• 确保测试设备（真机/模拟器）和运行Metro的电脑处于同一局域网，关闭系统代理、VPN、防火墙拦截规则，避免本地端口被拦截。
• 调出Expo开发菜单：真机摇一摇触发，Android模拟器按Ctrl+M、iOS模拟器按Cmd+D。
• 先关闭Remote JS Debugging开关，等待3秒后重新打开，Debugger会自动建立连接，不再显示waiting for client提示。
• iOS 14+真机需要提前在项目iOS配置中开启本地网络访问权限，否则无法发现局域网内的Metro服务。

3. 网络请求抓包配置 #

默认配置下Debugger不会拦截应用层网络请求，需要额外配置才能看到Axios请求日志：

• 在项目入口文件（App.js/index.js）的最顶部加入全局配置：

  // 开启远程调试网络追踪
  global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;
  global.FormData = global.originalFormData || global.FormData;
  

• 打开React Native Debugger设置面板，勾选Enable Network Inspect选项后重启。
• 检查Axios实例的baseURL配置：真机环境下localhost指向设备本身，需要替换为电脑的局域网IP192.168.0.198，否则会出现请求异常。终端看到的403报错属于接口本身的权限校验问题，连通调试器后可直接在Network面板查看请求头、参数定位原因。

常见问题排查 #

• 仍报WebSocket握手400错误：检查是否有Chrome浏览器打开了RN调试标签页，多个调试客户端同时连接Metro会直接触发握手失败，关闭所有无关调试页面仅保留React Native Debugger即可。
• 提示连接被拒绝：检查系统防火墙是否放行Node.js、Metro服务的入站连接，企业网络如果开启了客户端隔离，切换到个人手机热点测试即可。
• 连接成功但无控制台日志：检查Debugger控制台右上角的执行上下文，选择React Native而非默认的top上下文。

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