我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

redux官方提供了一个调试工具,还是挺好用的。可以非常形象化的说明redux到底存储了什么数据,执行了什么操作。并且可以对这些数据的变化过程,进行历史回放。所以,用于理解redux的运作机制,还是非常有帮助的。

苏南大叔:redux-devtools,redux谷歌浏览器扩展如何安装使用? - 谷歌浏览器插件
redux-devtools,redux谷歌浏览器扩展如何安装使用?(图5-1)

大家好,苏南大叔的程序如此灵动博客,记录苏南大叔和代码的故事。本文描述redux的调试工具redux-devtools的安装和使用。测试环境:chrome@103.0.5060.53redux-devtools-extension@3.0.11

基本情况

正常来说,是通过谷歌浏览器的插件管理里面下载的。这里不多说,插件的id是:lmhkpmbekcpmknklioeibfkpmmfibljd。下载安装好之后,可以在f12的最后一个菜单找到。界面截图:

苏南大叔:redux-devtools,redux谷歌浏览器扩展如何安装使用? - redux-界面
redux-devtools,redux谷歌浏览器扩展如何安装使用?(图5-2)

如果能正常下载到的话,也不会来看本篇文章。下载这类扩展总是有些费事的,相关文章:

源码方式下载

redux官方有个开源的仓库,是关于上述调试工具的。地址是:

然而,开源软件的通病就是:没有最后的成品,大多数都是要自己编译的,而编译的过程一般会非常艰难。所以,如果试图通过编译获得这个调试工具的话,苏南大叔建议您,最好先做好持久战准备。这个编译的过程,以后再说。

源码里面提供了N多种调试工具,除了redux-devtools-extension,还有redux-devtools-app等。编译的过程中,用到了npmp/nx等,最终还导致win10网络拥堵断网死机等状态。所以个人强烈不建议这个操作。

自行编译的方式被否决后,苏南大叔找到了一个稍稍低一点版本号的官方下载。

苏南大叔:redux-devtools,redux谷歌浏览器扩展如何安装使用? - chrome-extension-download
redux-devtools,redux谷歌浏览器扩展如何安装使用?(图5-3)

源码方式安装

不走寻常路,拿到的redux-devtools-extension调试器的源码,并不是crx格式的。
【推荐】在谷歌浏览器的插件管理里面,开启开发者模式,直接加载源码。

苏南大叔:redux-devtools,redux谷歌浏览器扩展如何安装使用? - 开发者模式加载已解压
redux-devtools,redux谷歌浏览器扩展如何安装使用?(图5-4)

也可以先自行打包成crx,然后再安装。不过,鉴于谷歌浏览器的检验机制,这种方案安装好之后,也会提示“该扩展已经损坏”。

苏南大叔:redux-devtools,redux谷歌浏览器扩展如何安装使用? - 错误提示信息损坏
redux-devtools,redux谷歌浏览器扩展如何安装使用?(图5-5)

相关文章

综述

这款redux-devtools-extension,除了下载过程比较艰难外。功能上还是挺实用的,推荐redux新手安装使用。

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   chrome    redux