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，无需安装、解压即可用的更多相关文章

  1. 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取

    web scraper 下载:Web-Scraper_v0.2.0.10 使用 Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬 ...

  2. 还在为百度网盘下载速度太慢烦恼?chrome浏览器插件帮你解决！

    百度网盘已然成为分享型网盘中一家独大的“大佬”了.时代就是这样不管你喜不喜欢,上网总会遇到些百度网盘共享的文件需要下载.然而,百度网盘对免费用户的限速已经到了“感人”的地步了,常常十多KB/秒的速度真 ...

  3. chrome浏览器插件启动本地应用程序

    chrome浏览器插件启动本地应用程序 2014-04-20 00:04:30|  分类: 浏览器插件|举报|字号 订阅     下载LOFTER我的照片书  |     chrome的插件开发这里就 ...

  4. Rest Client(Rest接口调试工具，有保存功配置功能) chrome浏览器插件

    Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件 下载地址 插件的操作很简单,下面是一些简单的实例. 1.安装 在谷歌应用商城搜索postman,如下图1-1所 ...

  5. chrome浏览器插件window resizer调试webapp页面大小

    chrome浏览器插件window resizer可以调整当前浏览器分辨率大小 可以自定义大小,以适合于andorid和iphone设备

  6. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

  7. chrome浏览器插件开发经验（一）

    最近在进行chrome浏览器插件的开发,一些小的经验总结随笔. 1.首先,推荐360的chrome插件开发文档:http://open.chrome.360.cn/extension_dev/over ...

  8. 强烈推荐 10 款珍藏的 Chrome 浏览器插件

    Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...

  9. 《React 与 Redux 开发实例精解》出版了！

    <React 与 Redux 开发实例精解>出版了! <React 与 Redux 开发实例精解>出版了! 关于 React 与 Redux React 与 Redux, 一个 ...

  10. nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录

    最近任务不忙,有时间了看一下Chrome插件相关的东西,于是想用nodejs + webpack写一个能直出插件的小工具. 1.nodejs + babel6 + webpack4 在写之前,是有把它 ...

随机推荐

  1. 基于python爬虫技术对于淘宝的数据分析的设计与实现

    本篇仅在于交流学习 本文主要介绍通过 selenium 模块和 requests 模块,同时让机器模拟人在浏览器上的行为,登录指定的网站,通过网站内部的搜索引擎来搜索自己相应的信息,从而获取相应关键字 ...

  2. wsl下的python环境管理

    开头 之前一直都在用python解释器和virtualenv来管理python的虚拟环境,但是被老大吐槽不好用之后,换了一种新的管理方式,那就是 pyenv + pyenv-virtualenv的使用 ...

  3. 2021-05-14：给定一个数组arr，想知道arr中哪两个数的异或结果最大。返回最大的异或结果。

    2021-05-14:给定一个数组arr,想知道arr中哪两个数的异或结果最大.返回最大的异或结果. 福大大 答案2021-05-14: 前缀树.一个数,用二进制表示,0走左边分支,1走右边分支.准备 ...

  4. Selenium - 元素定位(1) - 八种元素定位

    Selenium - 元素定位 八种元素定位 我们在做WEB自动化时,最根本的就是操作页面上的各种元素,而操作的基础便是元素的定位,只有准确地定位到唯一元素才能进行后续的自动化控制,下面将对各种元素定 ...

  5. 安装vue cli3以及配置环境 镜像下载

    安装vue cli3以及配置环境 镜像下载 1.下载安装Node.js 安装vue cli3之前需要先安装Node.js,方便对vue进行下载 node.js的下载与安装方法在隔壁哟 地址:https ...

  6. Redis - 二进制位数组

    简介 Redis 使用字符串对象来表示位数组,因为字符串对象使用的 SDS 数据结构是二进制安全的,所以程序可以直接使用 SDS 结构来保存位数组,并使用 SDS 结构的操作函数来处理位数组. 在 S ...

  7. python 学习之----time模块

    # timeimport time# # #1 获取时间戳# # print(time.time())# # #2 获取格式化时间对象# # #获取默认参数是当前系统时间戳# # print(time ...

  8. 五年磨一剑——Sealos 云操作系统正式发布！

    这是个宏伟的计划 这是一个宏伟的计划,漫长且有趣. 2018 年的某个夜晚,夜深人静,我挥舞键盘,敲下了 Sealos 的第一行代码.当时仓库命名为 "kubeinit",后来觉得 ...

  9. C++容器（vector、deque、list、map）

    (1) vector:将元素置于一个动态数组中,可以随机存储元素(也就是用索引直接存取). 数组尾部添加或删除元素非常迅速.但在中部或头部就比较费时. *代码演示:* 取: at在下标越界时会抛出异常 ...

  10. 前端Vue图片上传组件支持单个文件多个文件上传 自定义上传数量 预览删除图片 图片压缩

    前端Vue图片上传组件支持单个文件多个文件上传 自定义上传数量 预览删除图片 图片压缩, 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin? ...