无法使用Chrome DevTools调试基于Hermes的新React Native应用

问题描述 #

开发采用Hermes作为JavaScript引擎的React Native项目时，执行adb reverse tcp:8081 tcp:8081后应用可正常运行，但在Chrome的chrome://inspect页面中，应用未出现在可用调试目标列表中。已尝试检查android:debuggable标记、重启Metro/设备/电脑、更新相关依赖、确认USB调试、更换USB线缆/端口等步骤，问题仍未解决。

额外排查与解决步骤 #

• 确认Hermes调试连接触发：摇一摇设备或按Ctrl+M打开开发者菜单，选择「Debug」选项，确认是否出现"Debugger connected"提示。若未触发，可通过命令手动打开调试设置页面：adb shell am start -n com.yourpackagename/com.facebook.react.devsupport.DevSettingsActivity（替换com.yourpackagename为应用实际包名），再开启调试。
• 配置Chrome远程调试目标：打开chrome://inspect页面，点击「Configure...」按钮，确保localhost:8081已添加到目标列表，若未添加则手动添加并保存。
• 校验Hermes调试配置：检查android/app/build.gradle中的Hermes设置，确保开启调试模式：

  project.ext.react = [
    enableHermes: true,
    hermesFlags: ["-w"] // 启用Hermes调试
  ]
  

  修改后重新编译：cd android && ./gradlew clean && ./gradlew assembleDebug
• 检查ADB设备授权状态：执行adb devices确认设备状态为device，若显示unauthorized，需在设备上授权当前电脑的USB调试权限。
• 排除Chrome扩展干扰：尝试在Chrome隐身模式下打开chrome://inspect，或暂时禁用所有扩展后重试，避免扩展拦截调试连接。
• 确认端口未被占用：使用lsof -i :8081（Mac/Linux）或netstat -ano | findstr :8081（Windows）检查8081端口是否被其他程序占用，杀掉占用进程后重新启动Metro：npx react-native start --port 8081

替代调试方案 #

若上述步骤无效，可尝试以下替代工具：

• React Native Debugger：专为RN开发的调试工具，原生支持Hermes，安装后启动，在应用开发者菜单选择「Debug」即可自动连接。
• Hermes Inspector：在开发者菜单中选择「Inspect with Hermes」，直接使用Hermes自带的调试界面，无需依赖Chrome。

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