如何在Github Codespaces中使用Chrome/React Native DevTools？

先明确：React Native DevTools是什么？ #

它有三种使用形式：

• 浏览器扩展（配合Chrome DevTools使用，查看RN组件树）
• 独立桌面应用（单独窗口，功能更全）
• 内嵌在Metro的调试页面中（基础调试功能）

因为Codespaces是云端环境，无法直接在里面启动浏览器，所以我们通过端口转发+本地浏览器来实现调试。

方法1：使用Chrome DevTools（基础调试+日志） #

1. 确保你的Expo项目在Codespaces中运行expo start --dev-client --tunnel，终端会显示Metro服务的端口（默认是8081）。
2. 在Codespaces的端口面板（VS Code左侧栏的「Ports」标签）：
   • 找到8081端口，点击「Port visibility」设置为「Public」（如果用本地VS Code连接Codespaces，端口会自动转发到本地，无需额外设置）。
3. 打开本地的Chrome/Edge浏览器，访问 http://localhost:8081/debugger-ui/。
   • 这个页面就是Chrome DevTools的调试界面，能查看console.log输出、设置断点、检查网络请求等，完全替代终端日志。

方法2：添加React Native DevTools组件调试功能 #

方式A：浏览器扩展配合调试页面 #

1. 在本地Chrome/Edge浏览器安装「React DevTools」扩展（无需管理员权限，直接在浏览器应用商店搜索安装）。
2. 打开刚才的http://localhost:8081/debugger-ui/页面，点击浏览器右上角的React DevTools扩展图标，就能查看RN应用的组件树、状态、props等信息。

方式B：独立桌面版React Native DevTools #

1. 在本地机器的终端（无需管理员权限，不用全局安装）运行：

   npx react-devtools
   

   这会直接启动一个独立的DevTools桌面窗口。
2. 在你的安卓手机上，打开Expo应用的调试菜单（摇一摇手机或按设备快捷键），选择「Debug JS Remotely」，应用会自动连接到本地运行的DevTools，就能查看组件和调试JS了。

关于终端「j」键报错的说明 #

Codespaces云端环境没有安装Chrome/Edge浏览器，所以按「j」键无法启动本地浏览器，直接忽略这个提示，用上面的端口转发+本地浏览器方式即可。

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