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. Java的构造方法和标准JavaBean

    构造方法 一.构造方法概述: 构造方法也叫做构造器,构造函数,平时叫做构造方法 二.构造方法的作用: 创建对象的时候,由虚拟机自动调用,给成员变量进行初始化(赋值) 三.构造方法的格式: public ...

  2. [python] Python类型提示总结

    Python3.5 版本引入了类型提示(Type Hints),它允许开发者在代码中显式地声明变量.函数.方法等的类型信息.这种类型声明不会影响 Python 解释器的运行,但可以让 IDE 和静态分 ...

  3. ad-hoc实战

    ad-hoc实战 要求:利用Ansible搭建一个简易的作业网站,web端文件上传目录共享至nfs端,nfs的数据同步至backup 环境准备 主机名 主机角色 外网IP 内网IP m01 ansib ...

  4. python的docker环境配置

    docker环境配置 Docker基本操作指令, 下载安装参考 https://duoke360.com/tutorial/docker/install-docker docker + flask + ...

  5. 2021-10-16：单词拆分 II。给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict，在字符串中增加空格来构建一个句子，使得句子中所有的单词都在词典中。返回所有这些可能的句子。

    2021-10-16:单词拆分 II.给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,在字符串中增加空格来构建一个句子,使得句子中所有的单词都在词典中.返回所有这些可能的句子. ...

  6. 2021-09-19：数字 n 代表生成括号的对数，请你设计一个函数，用于能够生成所有可能的并且有效的括号组合。

    2021-09-19:数字 n 代表生成括号的对数,请你设计一个函数,用于能够生成所有可能的并且有效的括号组合. 福大大 答案2021-09-19: 递归. 参数1:左括号-右括号的数量. 参数2:左 ...

  7. flex弹性布局模式下文字超出显示省略号

    都知道flex弹性布局非常好用,会随分辨率不同,宽高自适,那怎么来设置在一定范围内的文字超出隐藏,显示省略号呢?其实也不难 看如下就是使用flex布局的 其实如上效果也同样离不开如下三句,只是用法不大 ...

  8. rest --framework 源码学习第一天 view 类

    首先view类:源码分析

  9. 美女同事的烦恼：如何配置 Apache SkyWalking 告警？

    小婉 技术部基本上是一个和尚庙,女生非常少,即使有女生也略微有点抽象,小婉就不一样,她气质绝佳. 上午,同事小婉刚才从老板办公室里出来,看上去一脸不悦的样子.为了表示对同事的关(ba)心(gua),我 ...

  10. .net 项目静态文件自动压缩打包

    打包工具选型 在 ASP.NET MVC 时代,我们常使用 BundleCollection 设置需要打包压缩的 js 和 css 文件,运行时框架会自动处理打包压缩过程并将最终结果传入响应. ASP ...