• 本站所有插件都是站长本人费时费力的人工筛选推荐,而非采集,亲测好用!如有插件失效,请留言,我会及时更新

Redux-DevTools- 浏览器调试工具

开发者插件 ChromeWu 5年前 (2020-03-07) 3651次浏览 0个评论
Redux DevTools是Chrome浏览器中的一款调试插件,它可以用于调试redux中的状态更改,我们可以清晰的看到当前store仓库中的state是怎么样的,在可视化工具的左边,我们还可以看到触发的action的变化。

使用redux-devtools工具可以在谷歌Chrome浏览器方便的查看项目的信息。

看到别人文章各种安装太麻烦,主要是插件难下载。于是亲自安装一下。

Redux-DevTools- 浏览器调试工具

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

Redux-DevTools- 浏览器调试工具

Redux-DevTools的使用

1.在项目的入口文件里  找到 createStore函数调用的地方,给它加第二个参数

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
1
2
3
4
const store = createStore(
  reducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

 

2.F12打开开发者工具

打开redux 就可以实时监控 state的状态变化

Redux-DevTools- 浏览器调试工具

Redux-DevTools-下载地址

点击下载
本文标题:Redux-DevTools- 浏览器调试工具
转载请保留页面地址:https://chromewu.com/redux-devtools.html
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址