Expo 49 Android端DevTools无日志/网络信息及连接异常求助

问题现象 #

• 按快捷键j调出DevTools后，无任何错误、警告提示，无法显示console.log日志及网络请求日志
• 应用重载后，DevTools弹出提示：

  Debugging connection was closed. Reason: WebSocket disconnected. Reconnect when ready by reopening DevTools.
  点击重连无效，关闭后重新调出仍无效果

• 偶尔首次尝试能在<MY IP>:8081路径下看到项目文件，但依旧无法查看日志
• 仅Android端存在该问题：真机、重置后的模拟器均测试过，无改善；iOS端刷新几次偶尔能看到日志，但并非每次有效，网络请求显示正常
• 推测问题可能与端口有关

环境信息 #

• 设备：MacOS 13.2.1 M1
• 日常使用Flipper调试可正常查看日志和网络信息，当前尝试切换到DevTools调试
• 项目依赖：

"dependencies": {
  "expo": "~49.0.13",
  "expo-status-bar": "~1.6.0",
  "react": "18.2.0",
  "react-native": "0.72.5"
},

测试场景 #

已按官方文档创建简易Expo应用（执行npx create-expo-app StickerSmash），添加fetch请求代码及console.log输出，App.js代码如下：

import { useEffect, useState } from "react"
import { StyleSheet, Text, View } from "react-native"

export default function App() {
  const [user, setUser] = useState("")
  console.log("App")
  useEffect(() => {
    console.log("useEffect")
    const apiUrl = "https://jsonplaceholder.typicode.com/users"
    async function fetchData() {
      try {
        console.log("Start fetching")
        const response = await fetch(apiUrl)
        const data = await response.json()
        const userName = data[0]?.username

        if (userName) {
          setUser(userName)
        }

        console.log("Data from the API:", data[0].username)
      } catch (error) {
        console.error("Error fetching data:", error)
      }
    }

    // 调用接口请求函数
    fetchData()
  }, [])

  return (
    <View style={styles.container}>
      <Text>`Fetched user: {user}`</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
})

• 使用chrome://inspect/#devices可识别到模拟器，但无法看到Expo应用条目

排查与解决建议 #

1. 端口冲突排查与指定端口调试 #

直接指定非默认端口启动项目，规避可能的端口占用问题：

npx expo start --port 8082

启动后按j调出DevTools，确认是否能正常连接并查看日志。同时可检查默认8081端口是否被其他进程占用：

lsof -i :8081

若有占用，杀掉对应进程后再用默认端口启动测试。

2. 重置Expo DevTools缓存 #

执行命令清除项目缓存与DevTools缓存：

npx expo start --clear

同时在Chrome中按Ctrl+Shift+R强制刷新DevTools页面，再重新连接调试。

3. Android端调试配置检查 #

• 确保模拟器/真机已开启USB调试，且已授权当前Mac设备的调试权限
• 手动建立端口转发：若用默认端口执行adb reverse tcp:8081 tcp:8081，若指定了其他端口则替换为对应端口号
• 检查Expo Go应用是否为最新版本，旧版本可能存在WebSocket连接兼容问题

4. Chrome调试替代方案 #

直接访问http://<你的IP>:8081/debugger-ui/（若指定了其他端口则替换），手动开启调试会话，尝试捕获日志。

5. 同步Expo CLI版本 #

检查本地Expo CLI版本是否与项目依赖的expo版本匹配：

expo --version

若版本差异较大，升级或降级CLI到对应大版本：

npm install -g expo-cli@^49.0.0

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