
软件介绍
Redux DevTools是用于调试应用程序的状态更改的插件。Redux DevTools是一个开源项目,非常适合开发者使用。用户使用该插件可以在浏览器中对Redux项目状态进行调试。除了Redux之外,它还可以与其他处理状态的体系结构一起使用。
插件介绍
Redux DevTools用于调试应用程序的状态更改。该扩展为Redux开发工作流程提供了启动功能。这是一个开源项目。
使用方法
1、在使用Chrome Redux调试插件之前,我们需要做一些项目的基本配置。我们要安装到项目的一些基本使用,如: react、redux、react-redux等。
import Redux from ‘redux’。
// 引入createStore创建store,引入applyMiddleware 来使用中间件。
import {createStore, applyMiddleware} from ‘redux’。
// 引入所有的reducer。
import storeReducer from ‘。。/Reducer/index.jsx’。
export default createStore(storeReducer)。
2、下载安装redux-devtools。
3、要想使用chrome redux调试插件,还需要在项目中安装 redux-devtools-extension 插件。其安装方法如下:
即在项目中直接执行下面的安装命令:
npm install redux-devtools-extension --save-dev
4、安装成功后,还需要redux-devtools在项目中的配置,实际上就是在创建store的时候把redux-devtools安装即可。
import Redux from ‘redux’
// 引入createStore创建store,引入applyMiddleware 来使用中间件。
import {createStore, applyMiddleware} from ‘redux’
// 引入所有的reducer。
import storeReducer from ‘/Reducer/index.jsx’
// 利用redux-logger打印日志。
import {createLogger} from ‘redux-logger’
// 安装redux-devtools-extension的可视化工具。
import { composeWithDevTools } from ‘redux-devtools-extension’
// 使用日志打印方法, collapsed让action折叠,看着舒服。
const loggerMiddleware = createLogger({collapsed: true})
export default createStore(
storeReducer,
composeWithDevTools( )
);
安装说明
1、下载安装文件
下载插件,并在浏览器安全提示时选择【保留】,在下载文件夹中找到下载好的文件,后缀是.crx 。
说明:若出现安全提示,请选择保留。这是浏览器的默认设置,我们的插件不会危害你的计算机。
2、打开扩展程序安装页面
复制chrome://extensions并粘贴到地址栏,按回车键进入扩展程序安装页面,打开右上角的【开发者模式】。
3、安装插件
将下载好的.crx文件拖拽到到扩展安装页面内,等待数秒,在安装弹窗内点击添加即可。
软件官网
https://github.com/zalmoxisus/redux-devtools
软件综述
Redux DevTools 是一款用于调试 Redux 应用程序的 Chrome/Firefox 扩展和独立工具。它允许您查看和回溯应用程序的状态,以及执行操作和检查副作用。
Redux DevTools 的主要功能包括:
- 状态检查器:此选项卡允许您查看当前应用程序状态的结构化视图。您可以展开和折叠对象以查看详细信息,并且还可以查看状态更改的历史记录。
- 操作检查器:此选项卡允许您查看最近执行的操作列表。你可以查看操作的类型、payload 和元数据。您还可以单击操作以查看它们是如何改变应用程序状态的。
- 副作用检查器:此选项卡允许您查看应用程序中执行的副作用列表。你可以查看副作用的类型、payload 和元数据。您还可以单击副作用以查看它们是如何改变应用程序状态的。
- 时间旅行:您可以使用 Redux DevTools 在应用程序的状态历史中前进和后退。这对于调试问题和了解应用程序如何随着时间的推移而变化非常有用。
- 录制和回放:Redux DevTools 允许您录制应用程序的操作序列,然后回放它们。这对于向其他人展示问题或重现错误非常有用。
Redux DevTools 是一个非常强大的工具,可以帮助您调试 Redux 应用程序并了解它们的工作原理。它易于使用,即使您是 Redux 的新手,也可以从中受益。
优点:
- 易于使用和安装
- 提供丰富的功能,包括状态检查器、操作检查器、副作用检查器、时间旅行和录制/回放
- 可以与任何使用 Redux 的应用程序一起使用
- 开源且免费
缺点:
- 可能减慢应用程序的速度,尤其是在大型应用程序中
- 在某些情况下可能难以使用
- 需要安装 Chrome/Firefox 扩展或使用独立工具
- 对于 Redux 的新手来说可能有点复杂
总体而言,Redux DevTools 是一款非常有用的工具,可以帮助您调试 Redux 应用程序并了解它们的工作原理。它易于使用,即使您是 Redux 的新手,也可以从中受益。