React Native调试器异常：点击无响应、无法连接调试求助

问题概述 #

• 点击「打开调试器」按钮无反应，调试页面显示Waiting, press ⌘R in simulator to reload and connect.
• 终端每次输出：info Opening flipper://null/Hermesdebuggerrn?device=React%20Native...
• 使用chrome://inspect/#devices调试Hermes时控制台无输出

环境信息 #

info Fetching system and libraries information...
System:
  OS: macOS 13.0.1
  CPU: (8) x64 Apple M1
  Memory: 42.82 MB / 16.00 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 20.5.0
    path: ~/.nvm/versions/node/v20.5.0/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v20.5.0/bin/npm
  Watchman:
    version: 2023.08.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10671973
  Xcode:
    version: 14.3.1/14E300c
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.8
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.4
    wanted: 0.72.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

解决步骤 #

1. 修复Flipper空链接问题 #

终端输出flipper://null说明Flipper配置异常，执行以下操作：

• 进入iOS项目目录，删除Pod缓存并重装：

  cd ios
  rm -rf Pods Podfile.lock
  pod install --repo-update
  

• 重启Metro服务并清空缓存：

  npx react-native start --reset-cache
  

2. 切换到Chrome调试模式 #

关闭Flipper调试强制使用Chrome：

• 在模拟器打开开发者菜单（⌘D），取消勾选「Debug with Flipper」
• 重新点击「Open Debugger」，此时会打开Chrome的http://localhost:8081/debugger-ui/页面
• 在模拟器按⌘R重载应用，等待调试页面连接

3. 调整Node版本适配 #

React Native 0.72.x推荐使用Node.js 16.x或18.x版本，当前Node 20.x可能存在兼容性问题：

• 使用nvm切换到Node 18.x：

  nvm install 18
  nvm use 18
  

• 重新安装项目依赖：

  yarn install # 或 npm install
  

• 重启Metro和模拟器

4. 修复Chrome Inspect无输出问题 #

• 确保开发者菜单中已勾选「Enable Hermes Debugging」
• 打开Chrome的chrome://inspect/#devices页面，点击「Configure」按钮，添加localhost:8081到目标列表
• 重载模拟器应用，等待页面加载出Hermes调试目标，点击「inspect」进入调试面板
• 若控制台仍无输出，尝试清空Chrome缓存或使用无痕模式打开调试页面

5. 清理模拟器缓存 #

• iOS模拟器中选择「Hardware -> Erase All Content and Settings」，重置模拟器
• 重新构建并运行应用：

  npx react-native run-ios
  

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