Linux+Firefox环境下Expo React Native安卓模拟器Redux DevTools调试

下面是几个可行的调试方案，按操作复杂度排序：

方案一：Expo远程调试 + Firefox Redux DevTools扩展 #

这是最贴近你现有环境的方案，无需额外安装桌面应用：

1. 启动安卓模拟器，确保它处于正常运行状态（模拟器默认通过10.0.2.2映射主机网络）
2. 在Expo应用中，按Ctrl+M打开开发者菜单，选择Debug Remote JS，Firefox会自动打开远程调试页面
3. 确认Firefox已安装官方Redux DevTools扩展
4. 在调试页面的控制台中执行以下代码，将Redux store暴露给全局：

window.store = store;

5. 打开Redux DevTools扩展，切换到Remote模式，即可看到安卓模拟器中的Redux状态变化

方案二：Redux DevTools独立桌面应用 #

如果浏览器扩展连接不稳定，可使用独立桌面应用：

1. 全局安装Redux DevTools：

npm install -g redux-devtools

2. 启动桌面应用：

redux-devtools

3. 修改Redux store配置，指定连接到主机的DevTools服务：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

export const store = configureStore({
  reducer: rootReducer,
  devTools: {
    hostname: '10.0.2.2', // 安卓模拟器访问主机的固定IP
    port: 8000, // DevTools默认端口，可在应用设置中修改
    name: 'Expo Android App'
  }
});

4. 重启Expo应用，打开开发者菜单确保Debug Remote JS已启用，此时桌面应用会自动连接到模拟器的Redux store

方案三：Flipper调试工具（推荐长期使用） #

Flipper是React Native官方调试工具，集成Redux调试体验更流畅：

1. 安装Flipper桌面应用（Linux可通过Snap商店或官方deb包安装）
2. 在Expo项目中添加依赖：

npx expo install react-native-flipper flipper-plugin-redux-debugger

3. 修改Redux store配置，集成Flipper插件：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
import { setupReduxDebugger } from 'flipper-plugin-redux-debugger';

export const store = configureStore({
  reducer: rootReducer,
});

// 仅在开发环境启用
if (__DEV__) {
  setupReduxDebugger(store);
}

4. 启动Flipper，确保安卓模拟器与主机在同一网络，打开Flipper中的Redux Debugger插件即可查看状态

常见问题排查 #

• 模拟器无法连接主机：确认模拟器使用NAT网络模式，10.0.2.2是主机的正确映射IP
• DevTools连接失败：检查主机防火墙是否开放对应端口，或更换未被占用的端口
• 远程调试卡顿：关闭Firefox的广告拦截插件，或确保调试页面未被浏览器限制

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