Ubuntu22.04下React Native Debugger 0.12.1连接与功能异常求助

问题说明 #

• 运行环境：Ubuntu 22.04，包管理工具为npm
• 初始故障：安装React Native Debugger 0.12.1后首次启动触发报错，全局安装4.22.0版本react-devtools后报错仍存在，查阅公开讨论未找到有效解决方案
• 后续故障：可正常连接debugger UI，但无法打开元素检查器，也无法查看Redux状态
  

修复步骤 #

一、解决启动报错问题 #

该报错核心原因是React Native Debugger 0.12.1内置适配的react-devtools版本与全局安装的4.22.0版本不兼容，并非缺少全局依赖，按以下命令操作即可修复：

1. 卸载当前全局安装的版本不匹配的react-devtools
   npm uninstall -g react-devtools
2. 安装与0.12.1版本完全适配的react-devtools稳定版
   npm install -g react-devtools@4.20.2
3. 给React Native Debugger执行文件补充可执行权限，避免Ubuntu权限机制导致组件加载失败
   如果是deb包默认安装，直接执行：
   sudo chmod +x /opt/React\ Native\ Debugger/react-native-debugger
   如果是自定义路径安装，先执行which react-native-debugger查询实际安装路径，替换上述命令中的路径后再执行赋权操作。

二、解决元素检查器、Redux状态无法查看问题 #

能正常连接UI但功能失效，基本是端口冲突、配置不匹配导致，按以下顺序排查：

1. 检查8081端口占用情况，避免其他进程抢占RN调试默认端口
   sudo lsof -i :8081
   如果返回非RN服务的占用进程，直接执行kill -9 进程PID释放端口，之后重启RN本地服务。
2. 打开React Native Debugger设置面板（快捷键Ctrl+,），确认端口配置和本地RN服务端口一致，同时勾选Enable Network Inspect、Enable Redux DevTools Integration两个选项。
3. 检查项目Redux配置：
   • 原生Redux写法：创建store时需注入devTools扩展支持，参考配置：

   const store = createStore(
     rootReducer,
     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
   )
   

   • Redux Toolkit写法：默认已开启devTools支持，只需确认开发环境配置中没有手动设置devTools: false即可。
4. 关闭所有已打开的调试窗口（包括浏览器端RN调试页），重启React Native Debugger，在RN开发菜单中重新选择Debug选项建立连接即可。

注意：同一时间只能启动一个调试端连接RN服务，多端同时连接会直接导致元素检查、状态抓取功能失效。

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