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. #Powerbi 利用时间智能函数，进行周度分析

    在实际工作中,我们往往需要同比分析,月度和年度的分析都有对应的时间智能函数,分别是MTD和YTD,但是缺少了周度的时间智能函数,而 恰恰日常工作中,我们又需要以周度来进行对应的分析,今天我们来学习一下 ...

  2. 2023-03-02：给定一个数组arr，长度为n， 任意相邻的两个数里面至少要有一个被选出来，组成子序列，才是合法的！ 求所有可能的合法子序列中，最大中位数是多少？ 中位数的定义为上中位数， [1,

    2023-03-02:给定一个数组arr,长度为n, 任意相邻的两个数里面至少要有一个被选出来,组成子序列,才是合法的! 求所有可能的合法子序列中,最大中位数是多少? 中位数的定义为上中位数, [1, ...

  3. 2022-08-03：以下go语言代码输出什么？A：2；B：3；C：1；D：0。 package main import “fmt“ func main() { slice := []i

    2022-08-03:以下go语言代码输出什么?A:2:B:3:C:1:D:0. package main import "fmt" func main() { slice := ...

  4. 2020-12-07：go中，slice的底层数据结构是什么？

    福哥答案2020-12-07: 源码位于runtime/slice.go文件中的slice结构体. type slice struct { array unsafe.Pointer len int c ...

  5. 2021-10-30：有效的字母异位词。给定两个字符串 s 和 t ，编写一个函数来判断 t 是否是 s 的字母异位词。注意：若 s 和 t 中每个字符出现的次数都相同，则称 s 和 t 互为字母异位

    2021-10-30:有效的字母异位词.给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词.注意:若 s 和 t 中每个字符出现的次数都相同,则称 s 和 t 互为字母异位 ...

  6. 2021-09-09：企鹅厂活动发文化衫，文化衫有很多种，企鹅们都穿文化衫。采访中，企鹅会说还有多少企鹅跟他穿一种文化衫。有些企鹅没被采访到，将这些回答放在answers数组里，返回活动中企鹅的最少数

    2021-09-09:企鹅厂活动发文化衫,文化衫有很多种,企鹅们都穿文化衫.采访中,企鹅会说还有多少企鹅跟他穿一种文化衫.有些企鹅没被采访到,将这些回答放在answers数组里,返回活动中企鹅的最少数 ...

  7. OpenStack云平台部署

    前言:本次部署采用系统的是Centos 8-Stream版,存储库为OpenStack-Victoria版,除基础配置,五大服务中的时间同步服务,七大组件中的nova服务,neutron服务,cind ...

  8. IDEA output 输出中文乱码解决方案

    1. 事发场景 最近在用idea 运行 spring 的项目发现运行之后 tomcat 的 output 输出 中文是乱码样子 2. 解决方法 点击右上角tomcat旁边的小三角 下拉框 点击Edit ...

  9. 【Java】水果超市管理系统

    前言 说是个系统,看着像实训的产物,但实际上这是Java课程最后一个关于jdbc的大实验,yes,挺大的. 过程 看着视频里的一堆一堆的文件,逻辑混乱的讲解,我决定 我自己写这个系统 说干就干: 分析 ...

  10. docker部署gitlab CI/CD （一）第一篇：部署gitlab及汉化

    网上很多类似教程,但多少有点夹带私货,有的竟然拉取的第三方镜像,而且很多都要修改配置文件,完全不知道是为什么,于是结合其他人的博客和官方文档,知其然也要知其所以然,于2023年4月17日写下这篇. 官 ...