如何在Node.js --inspect模式下通过Chrome DevTools调试Redux

我之前也踩过这个坑！浏览器里的Redux DevTools默认只能检测同进程的前端应用，而Node.js是独立的后端进程，所以得通过远程连接的方式让两者打通。下面是具体的实现步骤：

1. 安装必要的依赖包 #

首先需要两个工具：一个让你的Redux Store能连接到远程调试服务器，另一个用来启动这个调试服务器。在终端里执行：

npm install --save-dev redux-devtools-extension redux-devtools-cli

2. 配置Redux Store以支持远程连接 #

修改你创建Redux Store的代码，用composeWithDevTools配置远程连接参数。示例代码如下：

const { createStore, applyMiddleware } = require('redux');
const { composeWithDevTools } = require('redux-devtools-extension');
const rootReducer = require('./path/to/your/reducer');

// 配置远程调试的地址和端口，默认是localhost:8000
const composeEnhancers = composeWithDevTools({
  hostname: 'localhost',
  port: 8000,
  realtime: true, // 实时同步状态变更
});

// 创建store时应用这个增强器
const store = createStore(
  rootReducer,
  composeEnhancers(
    applyMiddleware(/* 这里放你的中间件，比如redux-thunk、redux-saga等 */)
  )
);

module.exports = store;

3. 启动Redux DevTools远程服务器 #

打开一个新的终端窗口，启动调试服务器：

npx redux-devtools --port=8000

启动成功后，你会看到类似 DevTools is running at ws://localhost:8000 的提示，说明服务器已经在监听连接了。

4. 在Chrome中连接到远程服务器 #

打开Chrome浏览器，确保你已经安装了Redux DevTools扩展。点击扩展右上角的设置图标（小齿轮），找到「Remote」选项，输入 localhost:8000，然后点击「Connect」按钮。

5. 启动Node.js应用并开始调试 #

现在用--inspect启动你的Node.js应用：

node --inspect your-app-entry-file.js

回到Chrome的Redux DevTools，你就能看到Node环境中的Store了！和前端调试一样，你可以查看所有触发的Action、追踪状态变更，甚至使用时间旅行功能调试。

一些额外的小提示 #

• 如果你的Node应用运行在Docker容器或者远程机器上，记得把hostname改成对应的IP地址，同时确保端口可以被外部访问。
• 如果8000端口被占用，换一个其他端口（比如8080），记得同步修改Store配置和服务器启动命令中的端口号。
• 为了避免在生产环境中暴露调试功能，建议用环境变量来控制是否启用：

const composeEnhancers = process.env.NODE_ENV === 'development'
  ? composeWithDevTools({ hostname: 'localhost', port: 8000 })
  : (f) => f; // 生产环境直接返回原函数

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