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. 2022-05-27：现在有N条鱼，每条鱼的体积为Ai，从左到右排列，数组arr给出。 每一轮，左边的大鱼一定会吃掉右边比自己小的第一条鱼， 并且每条鱼吃比自己小的鱼的事件是同时发生的。 返回多少轮之

    2022-05-27:现在有N条鱼,每条鱼的体积为Ai,从左到右排列,数组arr给出. 每一轮,左边的大鱼一定会吃掉右边比自己小的第一条鱼, 并且每条鱼吃比自己小的鱼的事件是同时发生的. 返回多少轮之 ...

  2. .join()字符串操作函数

    join函数是一个字符串操作函数 str.join(item)str表示字符串(字符),item表示一个成员,注意括号里必须只能有一个成员,比如','.join('a','b')这种写法是行不通的 举 ...

  3. java开发学习框架

    Java基础 1.1. Java简介与安装 1.2. Java基本语法 1.3. 数据类型与变量 1.4. 运算符与表达式 1.5. 流程控制(分支与循环) 1.6. 数组 面向对象编程 2.1. 类 ...

  4. wireshark基本使用

    Wireshark 是一种开源.跨平台的网络数据包分析工具,能够嗅探和调查实时流量并检查数据包捕获 (PCAP).它通常 被用作最好的数据包分析工具之一. 数据包过滤操作 ip过滤器 IP 过滤器帮助 ...

  5. API全场景零码测试机器人，华为云发布ATGen in CodeArts TestPlan

    摘要:华为云ATGen现开放对外邀测,欢迎预约. 本文分享自华为云社区<API全场景零码测试机器人,华为云发布ATGen in CodeArts TestPlan>,作者:华为云头条 . ...

  6. 现代 C++ 性能飞跃之：移动语义

    *以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「ENG八戒」https://mp.weixin.qq.com/s/Xd_FwT8E8Yx9Vnb64h6C8w 带给现代 C++ 性能 ...

  7. 使用numpy计算分子内坐标

    技术背景 当我们打开一个用于表示分子构象的xyz文件或者pdb文件,很容易可以理解这种基于笛卡尔坐标的空间表征方法.但是除了笛卡尔坐标表示方法之外,其实也有很多其他的方法用于粗粒化或者其他目的的表征方 ...

  8. [ESP] 私有版Rainmaker User Mapping

    [ESP] 私有版Rainmaker User Mapping 1. 设备烧录的程序esp-rainmaker/examples/gpio这个demo 我这里是自己的工程,可以参照 idf.py se ...

  9. 从源码级深入剖析Tomcat类加载原理

    众所周知,Java中默认的类加载器是以父子关系存在的,实现了双亲委派机制进行类的加载,在前文中,我们提到了,双亲委派机制的设计是为了保证类的唯一性,这意味着在同一个JVM中是不能加载相同类库的不同版本 ...

  10. CF1817E Half-sum

    题意 有一个大小为 \(N\) 的非负整数集合 \(A\),每次你可以从集合中取任意两个数,并将它们的平均数放回序列.不停操作,知道集合最后剩下两个数.请求出这两个数的差的绝对值的最大值对 \(10^ ...