在調試一個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?，希望看此文的小夥伴不要跟我一樣被坑。