如何为NodeJS专用Chrome DevTools添加扩展以调试Jest？

解决NodeJS Chrome DevTools加载Redux ImmutableJS扩展的问题 #

这个问题我之前也碰到过！Node专用的Chrome DevTools其实是独立的Chrome实例，和你日常使用的浏览器不共享扩展数据，所以得手动加载才行，下面给你两种靠谱的解决办法：

方法一：手动启动带扩展的Chrome DevTools #

1. 找到本地扩展文件路径
   首先找到你已安装的Redux DevTools扩展的本地目录：

   • Windows：%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions
   • macOS：~/Library/Application Support/Google/Chrome/Default/Extensions
   • Linux：~/.config/google-chrome/Default/Extensions

   进入后找Redux DevTools的ID文件夹（通常是lmhkpmbekcpmknklioeibfkpmmfibljd，你也可以在Chrome扩展页面的「详情」里查看ID），再进入最新版本号的子文件夹，复制这个完整路径。

2. 启动带扩展的Chrome实例
   打开终端运行命令，把路径替换成你刚才复制的：

   chrome --remote-debugging-port=9222 --load-extension=/path/to/your/redux-devtools-folder
   

3. 启动Jest调试模式
   另开一个终端，运行Jest并开启调试：

   node --inspect node_modules/jest/bin/jest.js --runInBand
   

   （--runInBand必须加，因为Jest默认多进程，调试多进程会出问题）

4. 连接调试
   在刚才启动的Chrome实例里访问chrome://inspect，找到Jest的进程点击「Inspect」，就能看到已经加载好的Redux DevTools扩展了，ImmutableJS数据也能正常调试。

方法二：代码层面集成Redux DevTools（无需浏览器扩展） #

如果不想折腾扩展加载，也可以直接在测试代码里集成redux-devtools-extension包：

1. 确保已经安装依赖：

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

2. 在创建Redux store时启用DevTools：

   import { createStore } from 'redux';
   import { composeWithDevTools } from 'redux-devtools-extension';
   import rootReducer from './your-reducer';
   
   const store = createStore(
     rootReducer,
     composeWithDevTools() // 启用调试
   );
   

3. 启动Jest调试后，在Chrome DevTools里会自动出现Redux面板，同样可以调试ImmutableJS数据结构。

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