Redux DevTools:Redux调试工具

CINDY 1人评论 40277次浏览 Chrome开发者工具插件
摘要 : Redux DevTools是一款可以在浏览器对redux项目状态进行调试的chrome插件。

Redux DevTools Chrome插件开发背景

在vue中型项目开发的过程中,一般都是要用到vuex这个状态管理工具的,这样可以方便我们管理全局的状态,同时,为了在开发的过程中,更加方便地实时查看到state状态,我们会使用 vue-devtool工具,这样就可以在浏览器中实时看到 state的变化以及触发的mutations 等等。 在react的开发过程中也是如此,redux类似于vue中的vuex,也是状态管理工具,而我们今天要介绍的是一款可以在浏览器中选择使用redux-devtools工具来进行使用了redux项目的开发的chrome插件,通过redux-devtools, 我们可以清晰的看到当前 store 仓库中的 state 是怎么样的,在可视化工具的左边,我们还可以看到触发的action的变化。 这样,使得我们开发过程中很方便地进行调试。 

Redux DevToolslogo图片

Redux DevTools Chrome插件使用方法

1.在使用Chrome Redux调试插件之前,我们需要做一些项目的基本配置。我们要安装到项目的一些基本使用,如: react、redux、react-redux等。基本框架如下:

chrome 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,去谷歌应用商店搜索redux-devtools直接安装即可。也可以在本站离线下载安装chrome redux调试插件,离线安装的方法参照:chrome插件的离线安装方法最新chrome浏览器下载地址:https://chromecj.com/category/chrome/。插件安装成功后,在浏览器的右上角会有相关的显示。 
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(    )
);

Redux DevTools图片

Redux DevTools Chrome插件联系方法

内容由:https://github.com/zalmoxisus/redux-devtools-extension提供

Redux DevTools:Redux调试工具下载地址

点击下载Redux DevTools:Redux调试工具

标签: 调试 Axure redux vue

转载必须注明来自: Chrome插件 » Redux DevTools:Redux调试工具

Vue.js devtools

Vue.js devtools

3 人评论 91901 次人浏览 4.6分 4.6 分
Vue.js开发者工具是一款适用于chrome浏览器和Firefox浏览器的浏览器插件。
图文详解vue.js devtools使用方法

图文详解vue.js devtools使用方法

0 人评论 24771 次人浏览 3.0分 3.0 分
本文主要介绍Vue.js devtools使用方法,提供chrome插件直接安装和源代码安装两种方法,你还可以在其中找到常见问题即安装之后“vue.js not detected“的解决办法。
基于REST的Web服务客户端

基于REST的Web服务客户端

3 人评论 57349 次人浏览 3.0分 3.0 分
基于REST的Web服务客户端是一款可以使用Chrome插件来模拟REST请求来测试REST风格的web Api的谷歌浏览器插件。
Axure谷歌浏览器插件

Axure谷歌浏览器插件

1 人评论 90042 次人浏览 3.2分 3.2 分
Axure谷歌浏览器插件是一款可以帮助用户在chrome谷歌浏览器显示生成的HTML原型的扩展程序。
开发常用工具(Develop Tools)

开发常用工具(Develop Tools)

0 人评论 9550 次人浏览 3.0分 3.0 分
开发常用工具(Develop Tools)是一款可以为我们提供一些常用的开发工具的插件。比如Unix时间戳、URL编码/解码、汉字转换拼音、ip地址查询、加密(MD5,MD4,SHA1)、BASE64编码/解码等,它能够辅助一些网页开发人员进行编程工作。
AngularJS Batarang - Angular调试插件

AngularJS Batarang - Angular调试插件

0 人评论 2907 次人浏览 3.0分 3.0 分
angularjs batarang插件是一款功能强大的可以安装到谷歌浏览器上使用的Angular调试插件,安装使用这款angularjs batarang插件可以让你在开发过程中更加便捷。
评论:(1)

已有 1 位网友发表了一针见血的评论,你还等什么?

  • 1楼 Redux-DevTools 回复该留言
    Redux-DevTools 好用