chrome浏览器插件react devtools、redux devtools,无需安装、解压即可用
react devtools用于调试react代码,可以查看到props、state的值,以及定义的hooks,而redux devtools可以追踪到action的派发、store的变化,两个都是react开发过程中非常好用的工具

下面是附上两个开发者工具下载地址
react devtools
链接:https://pan.baidu.com/s/1gLF1Bw9vn6CRiWnFayfJYA 提取码:shsk redux devtools
链接:https://pan.baidu.com/s/1FI7RU3vQ1raEXpmQ-fwXUA 提取码:in0n
下载文件后解压

打开拓展程序,选择 加载已解压的拓展程序,导入上面的文件夹

导入文件夹后就可以在拓展程序里看到 react 和redux的开发者工具

点击右上角的用户旁类似于 拼图 的按钮,将react、redux开发者工具固定在导航栏处,如果该页面使用了react / redux,对应的图标会变亮,生产环境和开发环境亮的颜色不一样,如果没有使用则置灰

然后通过 ctrl + shift + i,检查/审查元素,当该页面有使用react / redux 时,才能找到 react / redux 的开发者工具,选择即可进行相关的调试

以上就是react/redux的开发者工具安装步骤
chrome浏览器插件react devtools、redux devtools,无需安装、解压即可用的更多相关文章
- 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取
web scraper 下载:Web-Scraper_v0.2.0.10 使用 Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬 ...
- 还在为百度网盘下载速度太慢烦恼?chrome浏览器插件帮你解决!
百度网盘已然成为分享型网盘中一家独大的“大佬”了.时代就是这样不管你喜不喜欢,上网总会遇到些百度网盘共享的文件需要下载.然而,百度网盘对免费用户的限速已经到了“感人”的地步了,常常十多KB/秒的速度真 ...
- chrome浏览器插件启动本地应用程序
chrome浏览器插件启动本地应用程序 2014-04-20 00:04:30| 分类: 浏览器插件|举报|字号 订阅 下载LOFTER我的照片书 | chrome的插件开发这里就 ...
- Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件
Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件 下载地址 插件的操作很简单,下面是一些简单的实例. 1.安装 在谷歌应用商城搜索postman,如下图1-1所 ...
- chrome浏览器插件window resizer调试webapp页面大小
chrome浏览器插件window resizer可以调整当前浏览器分辨率大小 可以自定义大小,以适合于andorid和iphone设备
- 用Javascript编写Chrome浏览器插件
原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...
- chrome浏览器插件开发经验(一)
最近在进行chrome浏览器插件的开发,一些小的经验总结随笔. 1.首先,推荐360的chrome插件开发文档:http://open.chrome.360.cn/extension_dev/over ...
- 强烈推荐 10 款珍藏的 Chrome 浏览器插件
Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...
- 《React 与 Redux 开发实例精解》出版了!
<React 与 Redux 开发实例精解>出版了! <React 与 Redux 开发实例精解>出版了! 关于 React 与 Redux React 与 Redux, 一个 ...
- nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录
最近任务不忙,有时间了看一下Chrome插件相关的东西,于是想用nodejs + webpack写一个能直出插件的小工具. 1.nodejs + babel6 + webpack4 在写之前,是有把它 ...
随机推荐
- 2023-03-06:给定一个二维网格 grid ,其中: ‘.‘ 代表一个空房间 ‘#‘ 代表一堵 ‘@‘ 是起点 小写字母代表钥匙 大写字母代表锁 我们从起点开始出发,一次移动是指向四个基本方向之
2023-03-06:给定一个二维网格 grid ,其中: '.' 代表一个空房间 '#' 代表一堵 '@' 是起点 小写字母代表钥匙 大写字母代表锁 我们从起点开始出发,一次移动是指向四个基本方向之 ...
- 2020-10-06:java中垃圾回收器让工作线程停顿下来是怎么做的?
福大大答案2020-10-06: 简单回答:安全点,主动式中断. 中级回答:用户线程暂停,GC 线程要开始工作,但是要确保用户线程暂停的这行字节码指令是不会导致引用关系的变化.所以 JVM 会在字节码 ...
- 2022-03-09:我们正在玩一个猜数游戏,游戏规则如下: 我从 1 到 n 之间选择一个数字。 你来猜我选了哪个数字。 如果你猜到正确的数字,就会 赢得游戏 。 如果你猜错了,那么我会告诉你,我选
2022-03-09:我们正在玩一个猜数游戏,游戏规则如下: 我从 1 到 n 之间选择一个数字. 你来猜我选了哪个数字. 如果你猜到正确的数字,就会 赢得游戏 . 如果你猜错了,那么我会告诉你,我选 ...
- Stream流根据属性去重
List根据属性去重 创建一个user集合 User user1 = new User("user1", 18, "AAA"); User user2 = ne ...
- vue全家桶进阶之路17:组件与组件间的通信
在 Vue2 中,组件与组件之间的通信可以通过以下几种方式来实现: Props 和 Events 这是 Vue2 中最基础和常用的父子组件通信方式.父组件通过属性传递数据给子组件,子组件通过事件触发向 ...
- Python获取当前时间、获取当月第一天、最后一天日期等方法
```python先导入包: import calendarimport datetimefrom datetime import timedelta获取今天日期: #返回datetime格式:eg: ...
- 【论文笔记】Deeplab系列
[深度学习]总目录 DeepLab系列是谷歌团队提出的一系列语义分割算法.DeepLab v1于2014年推出,随后2017到2018年又相继推出了DeepLab v2,DeepLab v3以及Dee ...
- 深度学习基础入门篇[8]::计算机视觉与卷积神经网络、卷积模型CNN综述、池化讲解、CNN参数计算
深度学习基础入门篇[8]::计算机视觉与卷积神经网络.卷积模型CNN综述.池化讲解.CNN参数计算 1.计算机视觉与卷积神经网络 1.1计算机视觉综述 计算机视觉作为一门让机器学会如何去"看 ...
- springboot mvc配置原理+扩展springmvc(重点)
1.新建config目录 2.在config目录下创建自定义配置类 3.根据官方文档得到要有注解@Configuration并且继承类WebMvcConfigurer 扩展springmvc:我们慢慢 ...
- nginx发布vue 项目
在本次使用nginx发布vue项目遇到 配置location 始终404 和 在项目子目录点击浏览器刷新出现404问题 使用nginx发布vue项目,为了方便测试就下载了一个nginx 放置自己目录下 ...