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. .Net开发的音频分离桌面应用，可用于提取背景音乐

    背景音乐对于视频来说是非常重要的,制作视频的人来说,听到一些符合自己视频的背景音乐,又找不到背景音乐的源音乐,这时候就需要有软件帮助提取背景音乐了. 项目简介 这是基于C#开发的UI界面,支持中文等多 ...

  2. iframe分栏拖拽伸缩例子

    这个标题有些绕口,鄙人愚笨,实在找不到一个比较准确的说法,总之就是: 一个页面内显示多个iframe,一个变宽,另一个就变窄,一个变高,另一个就变矮的这种可自由伸缩的效果.它们之间有一个可多拽的分隔条 ...

  3. vant中van-dialog组件点击确认按钮禁止弹窗自动关闭

    1.在van-dialog组件中添加 before-close 属性, 2.定义该方法 newGroupBefColse(action, done) { if (action == 'confirm' ...

  4. 2021-04-17：给定一个整型数组 arr，数组中的每个值都为正数，表示完成一幅画作需要的时间，再 给定 一个整数 num，表示画匠的数量，每个画匠只能画连在一起的画作。所有的画家 并行工作，请

    2021-04-17:给定一个整型数组 arr,数组中的每个值都为正数,表示完成一幅画作需要的时间,再 给定 一个整数 num,表示画匠的数量,每个画匠只能画连在一起的画作.所有的画家 并行工作,请 ...

  5. 2022-02-14：k8s安装gogs，yaml如何写？

    2022-02-14:k8s安装gogs,yaml如何写? 答案2022-02-14: yaml如下: apiVersion: v1 kind: Service metadata: labels: a ...

  6. PictureBox保存图片照片到数据库

    Private Sub PAPHOTO_SAVE() Try If TxtPictureURL.Text.ToString <> "" Then Dim SQL_Str ...

  7. ent M2M模型在pxc集群中的一个大坑

    ent M2M模型在pxc集群中的一个大坑 事故简要分析 PXC集群3个节点,在插入数据时,如果使用数据库自己生成的主键,一般顺序为1,4,7,10- 这里就是坑的源头,在ent底层代码中,在做M2M ...

  8. 顶会ICSE-2023发布LIBRO技术，利用大模型技术进行缺陷重现，自动重现率达33%

    摘要:本文围绕LIBRO技术的主要步骤进行介绍. 本文分享自华为云社区<[LLM for SE]顶会ICSE-2023发布LIBRO技术,利用大模型技术进行缺陷重现,自动重现率(33%)实现业界 ...

  9. Linux修改Python软链接

    Linux修改python软链接 0. 适用场景及基础知识 适用场景: 有些自带的是python3命令,嫌输入太麻烦,可以修改成python命令 有些自带是python是python2,想修改成pyt ...

  10. Pyhton F字符串引起的invalid syntax

    事发现场 偶然运行到之前写的爬虫,发现运行不了,报错invalid syntax,于是来找bug 报错截图: 原因: 这样用法称之为 f-string f-string,亦称为格式化字符串常量(for ...