React Native Debugger空白、Redux DevTools不显示的解决方法求助

1. 确认Redux DevTools中间件集成正确 #

在RN项目的store配置文件中，必须确保已引入并使用redux-devtools-extension的增强器，示例代码：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(...yourMiddlewareList))
);

启动RN应用后，摇一摇设备或按Cmd+D/Ctrl+D打开调试菜单，确认开启"Debug JS Remotely"，再刷新调试器窗口。

2. 清除调试器缓存与偏好 #

关闭React Native Debugger，执行以下命令清除缓存文件：

rm -rf ~/Library/Application\ Support/com.facebook.react.devtools

重新启动调试器后再次连接RN应用。

3. 切换至Chrome内置DevTools #

在RN调试菜单选择"Debug with Chrome"，打开Chrome开发者工具：

• 若未显示Redux标签，可在Console中手动执行：

  window.__REDUX_DEVTOOLS_EXTENSION__.connect()
  

• 成功连接后即可在Redux标签查看状态、追踪动作。

4. 调整React Native Debugger版本 #

卸载当前版本：

brew uninstall --cask react-native-debugger

安装已知稳定的旧版本（如4.1.7）：

1. 前往Homebrew Cask仓库历史提交中找到对应版本的react-native-debugger.rb文件
2. 下载该文件到本地，执行安装命令：

brew install --cask ./react-native-debugger.rb

5. 校验依赖版本兼容性 #

• 执行npm list redux-devtools-extension查看当前依赖版本，确保其与react-native、redux版本匹配（例如RN 0.70+建议使用redux-devtools-extension@^2.13.9）
• 若版本不兼容，重新安装适配版本：

npm install redux-devtools-extension@适配版本 --save-dev

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