在前端开发中，多数项目都会使用 Redux 进行状态管理。为了方便开发者调试和排查问题，我们可以使用 Redux DevTools，它是一种 Chrome 插件。而基于 Redux DevTools 的 npm 包 redux-devtools-inspector2 可以为我们提供更高级的调试功能。
本文将介绍如何使用 redux-devtools-inspector2，包括安装、配置和使用方法，同时提供示例代码说明。让我们开始吧！
安装
首先，我们要在项目中安装 redux-devtools-inspector2。在命令行中输入以下命令：
npm install redux-devtools-inspector2 --save-dev
配置
接下来，我们要进行 redux-devtools-inspector2 的配置。我们需要在 createStore 函数中使用 composeWithDevTools，将其作为 applyMiddleware 中间件的参数：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- ---------------------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ------------------------------------------- --
完成配置后，我们需要在 Chrome 浏览器中安装 Redux DevTools 扩展程序，然后重启浏览器。
使用
现在我们已经将 redux-devtools-inspector2 集成到了 Redux 中，可以在开发状态下使用它了。在 Chrome DevTools 的 Console 中输入以下代码：
window.__REDUX_DEVTOOLS_EXTENSION__.open()
这将打开一个 Redux DevTools 窗口，左侧是数据列表，右侧是数据详情。可以通过在左侧的列表中选择数据来查看详细信息。
同时，使用 redux-devtools-inspector2 还可以实现时间旅行功能。我们可以在 Redux DevTools 窗口中选择一个数据，然后点击“Jump”或拖动时间线进行时间旅行。
示例代码
以下是一个简单的示例，展示了如何在 Redux 中使用 redux-devtools-inspector2：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ----------------------------
------ ----- ---- --------------
------ ----------- ---- -------------
----- ----- - ------------
------------
-------------------------------------------
--
-- --- ------
----- ------------- - -
----- -----------
-------- -
--- --
----- ------
-
--
------------------------------
-- ---- ------
---------------- ----- ------ ---在上面的示例中，我们首先定义了一个 Redux store，然后添加了一个 ADD_TODO 的 action。最后，在运行了store.dispatch({ type: 'UNDO' })后，我们撤销了该 action。
总结
通过本文的介绍，可以看出 redux-devtools-inspector2 为开发者提供了非常便利的调试功能，可以帮助我们更方便地开发和排查问题。希望本文能够对您有所帮助，让您在开发过程中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e281e8991b448d7786