Redux DevTools 是一个专为 Redux 开发者设计的浏览器扩展，能显著提升调试效率。它提供实时状态监控、时间旅行调试、操作日志等功能，是开发 Redux 应用时不可或缺的工具。🎯

核心功能 ✅

  • 实时状态查看：直观展示 Redux 状态树，支持快速展开/折叠节点
  • 时间旅行调试：回退到任意历史状态，重新执行操作进行调试 ⏪
  • 操作日志追踪：记录所有 dispatch 的操作，可过滤和搜索
  • 性能分析：检测 reducer 计算耗时，优化应用性能 ⏱️

快速上手 🚀

  1. 安装 Chrome 扩展：Redux DevTools 官方页面
  2. 在 React 项目中集成： 
    import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(rootReducer, composeWithDevTools());
  3. 使用快捷键 Ctrl+Shift+D 或 Cmd+Shift+D 激活面板

拓展学习 📚