目录 安装修改创建Store代码安装本地redux dev tool服务器启用远程调试
在调试一个Chrome插件的时候，第一次用到了Redux DevTools的远程模式，进而了解到React Native的开发朋友们平时都是怎么调试redux store的。
使用远程模式，需要App在启用Redux DevTool的基础上，再添加[remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools)这个库。按照Github上的指示，只需要做以下几件事：
安装打开命令行工具，指向项目目录，运行以下命令行：
npm i remote-redux-devtools -D 修改创建Store代码 import { createStore } from 'redux';import devToolsEnhancer from 'remote-redux-devtools';const store = createStore(reducer, devToolsEnhancer(options));这里将remote-redux-devtools提供的devToolsEnhancer作为redux中间件传入。devToolsEnhancer可以接受一个Object类型的配置。没有提供域名配置的话，它会默认使用一个[remotedev.io](http://remotedev.io/)的远程服务器（看了一下github issue发现好像经常会挂）来帮助通信，这就会把你的数据通过网络传送到远程服务器，插件再进行显示。
大部分人应该都不希望自己的数据被传到公用的服务器吧。因此它也提供了可以设置自己本地服务器的方案。就是使用remotedev-server这个node开源项目在自己电脑上设置一个简单的本地服务器。
假设我们将这个服务器挂在localhost:8000上，代码修改如下：
import { createStore } from 'redux';import devToolsEnhancer from 'remote-redux-devtools';const store = createStore(reducer, devToolsEnhancer({hostname: 'localhost',port: 8000));来指示中间件把数据发送到本地服务器。
如果有多个redux中间件的话，那就用composeEnhancers：
import { createStore, applyMiddleware } from 'redux';import { composeWithDevTools } from 'remote-redux-devtools';const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 });const store = createStore(reducer, /* preloadedState, */ composeEnhancers( applyMiddleware(...middleware))); 安装本地redux dev tool服务器如上所述，本地的redux dev tool服务器需要在本地安装remotedev-server。
npm i remotedev-server -D然后便可以在项目目录中，通过如下命令启动它：
npx remotedev --hostname=localhost --port=8000这里，我们指定的hostname与port要跟上一步“修改创建Store”代码的设置一样。（localhost:8000其实是remotedev-server的默认配置，启动的时候可以不指定）。
启动成功就能看到如下界面：
这里remote-dev-tools只会在两种情况下被启用：
环境变量NODE_ENV为development开发模式的时候composeWithDevTools()选项中有realtime: true的时候简单来说，记得启动开发调试服务器的时候带上这个环境变量，如：
$: NODE_ENV=development npm start然后打开Redux DevTool 的远程调试模式。方法有多种，我感觉最简单的就是直接在浏览器里打开 http://localhost:8000 ，就是我们刚刚启动 RemoteDev Server的地址。
或者你也可以在Chrome里通过Redux DevTools插件打开。在任何一个网页的地址栏右边图标（找不到的话点击三个点的那个图标打开的下拉列表第一行）里点击Redux DevTools图标：
可以看到里面有一个Open Remote DevTools的选项。点击会打开如下窗口：
这就是远程模式的Redux插件啦！但是现在没有任何东西， 因为它默认是跟[remotedev.io](http://remotedev.io/)通信。我们需要告诉它应该跟我开的本地服务器localhost:8000通信才对：
点击提交，应该就能看到你的redux store啦！
对了，在配置的时候，我并没有一下就成功，远程模式一直都没有办法接收到数据。最后发现App在发送数据的时候提示websocket无法连接上我的本地服务器，顺藤摸瓜发现有人提交了Chrome v77在websocket API上有bug?，希望看此文的小伙伴不要跟我一样被坑。