React Native Expo项目JS Debugger无法打开及调试异常求助

问题描述 #

基于Expo的React Native项目出现以下调试异常：

• 点击「Open JS Debugger」时终端报错：

  Error launching JS inspector: [LaunchBrowser] Unable to find a browser on the host to open the inspector. Supported browsers: Google Chrome, Microsoft Edge

• Metro bundler运行时按「j」键打开调试器同样失败
• 手动访问http://localhost:19000/debugger-ui/并重载App后，Chrome Sources标签页无JS文件显示
• 已尝试重装Android Studio、更换设备及API版本，问题仍未解决

项目package.json配置：

{
  "name": "gizapp",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~48.0.4",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

解决方法 #

1. 手动指定浏览器路径 #

Expo无法自动识别浏览器时，可通过以下方式指定：

• 临时指定：启动Expo时直接传入Chrome路径（Windows示例）：

  expo start --chrome "C:\Program Files\Google\Chrome\Application\chrome.exe"
  

  macOS路径示例：/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
• 永久配置：设置系统环境变量EXPO_BROWSER为浏览器可执行文件的完整路径，确保系统能识别到浏览器。

2. 配置ADB端口转发（安卓设备/模拟器） #

确保设备与电脑在同一局域网，执行端口转发命令：

adb reverse tcp:19000 tcp:19000
adb reverse tcp:19001 tcp:19001

完成后重启Metro bundler，再尝试打开调试器。

3. 清理项目缓存 #

• 清除Expo缓存并重启Metro：

  expo start -c
  

• 重置npm依赖：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

4. 手动配置Chrome调试目标 #

1. 打开Chrome，访问chrome://inspect
2. 点击「Configure」按钮，添加localhost:19000到目标列表
3. 保存后刷新页面，等待Chrome识别到Expo调试会话
4. 在App开发者菜单中勾选「Debug JS Remotely」，触发重载

5. 确认调试模式与重载步骤 #

• 确保App已开启调试模式：通过摇一摇设备（模拟器按Ctrl+M/Command+M）打开开发者菜单，勾选「Debug JS Remotely」
• 手动打开http://localhost:19000/debugger-ui/后，必须在App中执行「Reload」操作，JS文件才会加载到Chrome Sources标签页

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