react-devtools安装使用

最新推荐文章于 2024-08-13 08:38:19 发布
最新推荐文章于 2024-08-13 08:38:19 发布
阅读量656 收藏 1
点赞数
分类专栏： React 文章标签： 开发工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dong123ohyes/article/details/117626256
版权
本文介绍了如何从GitHub releases下载并安装React DevTools的Chrome和Firefox扩展程序。解压后导入浏览器，F12开启开发者工具，React页面会显示'React'标签页。此外，快捷键$r可在控制台获取组件实例。
摘要由CSDN通过智能技术生成

一、直接下载编译好的release包

1.访问releases
https://github.com/facebook/react-devtools/releases

2.可选择chrome或firefox的扩展程序包

chrome-extension.zip

firefox-extension.zip

3.解压后，在浏览器中导入扩展程序即可

4.按F12打开开发者工具，只要是React页面，都会在右边显示“React” Tab标签。

5. console快捷键$r，可以获取组件的实例

爱上的云
关注
专栏目录
react-devtool-4.4.0.crx
03-05
不用下载源码，不用编译，不用敲命令。 直接拖拽到chrome即可使用， 亲测可正常使用。 插件详细情况描述： React Developer Tools 4.4.0 (1/3/2020) Adds React debugging tools to the Chrome Developer Tools. Created from revision f749045a5 on 1/3/2020. ID：fmkadmapgofadopljbjfkapdkoienihi
React之devtools的使用
youhebuke225的博客
05-05 2143
安装 官网 https://www.cnblogs.com/xiaoxuStudy/p/13339641.html
React Query DevTools 使用教程
最新发布
gitblog_00554的博客
08-13 657
React Query DevTools 使用教程 react-query-devtools⚛️ Devtools for React Query项目地址:https://gitcode.com/gh_mirrors/re/react-query-devtools 项目介绍 React Query DevTools 是一个用于调试和可视化 React Query 状态管理库的开发工具。它提供了一...
React 调试开发插件 React devtools 的使用
BILL-博客-LLIB
08-17 1537
当在 Element 处点击任意 DOM 元素的时候，可以看到有个 “==$0”，可以通过 "$0" 获取相关的 DOM 节点。同样地，在 Components 处选中某一个React组件后，可以在 Console 处将当前选中的 React 元素输出。比如，点击左边的第一个ListItem，右边显出它的 props 相关属性、事件处理函数等等。在 Components 处，可以看到整个 React 应用的组件数。在 Console 处输入 $r，就输出了该组件的实例。右窗口显示组件具体的属性。
npm 安装React Devtools调试工具
热门推荐
jocchoc的博客
01-09 2万+
前言 这里主要写给和我一样摸索的新手，之前相信大家也看到了网上的一些安装方法，有的给你个git上的下载链接，然后就没有然后了(好像官方也没给个具体操作)；有的让你去google商店下载一个.crx，前提你的网能翻墙。这里主要讲一下如何通过git上的react-devtools文件下载后打包一份扩展程序，来对chrome浏览器进行插件安装。 去git上下载react-devtools文件到本地
react调试工具react -devtools的安装
马娟的博客
10-11 4137
    前言     react-devtools是什么？         react-devtools是一款由 facebook 开发的有用的 Chrome浏览器扩展。通过它我们可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。 安装React Devtools有两种方法： 方法一：chrome商店上直接下载（前提是该电脑已经翻墙）。     ...
React-devtools-3.6.0.zip（最新版chrome的React插件）
07-28
React-devtools-3.6.0.zip 是一个针对React开发者的工具包，它与Chrome浏览器兼容，特别是最新版本。这个工具的主要目的是为了帮助开发者更好地理解和调试React应用。React是一个广泛使用的JavaScript库，用于构建...
react-devtools-3.zip
03-04
3. 从官方GitHub仓库下载最新版本的React DevTools ZIP文件（例如，"react-devtools-3.zip"）。 4. 点击“加载已解压的扩展程序”，选择刚刚解压缩的文件夹。 5. 安装完成后，重启浏览器，就可以在开发者工具中看到...
react-devtools.zip
06-05
这个“react-devtools.zip”文件包含了手动编译版的React DevTools，适用于离线安装在Chrome浏览器的扩展程序上。 在详细解释React DevTools之前，首先需要了解React，这是一个由Facebook开发并维护的JavaScript库...
react-devtools 最新插件
03-12
react-devtools 最新插件 react-devtools 最新插件 react-devtools 最新插件 react-devtools 最新插件 react-devtools 最新插件 react-devtools 最新插件 react-devtools 最新插件
004-react-devtools安装和使用
赳赳万里鲲
10-12 3285
在运行react项目时，安装react-devtools使调试更方便。 1、下载.crx文件； 2、打开拓展程序 点击上图所指图标，找到菜单中的‘更多工具’—‘拓展程序’； 页面如下： 3、将.crx文件拖拽到拓展程序所在页面，显示如图信息即为添加成功； 4、运行react项目之后，打开控制台，若出现如下情况则为正常，若没有显示“React”属性，则进行拓展程序中查看插件相应权限是否开启。 ...
React-DevTools开发者工具安装
席木木的博客
10-03 8051
React开发者工具最简单的安装方式自然是科学上网，通过Google Chrome浏览器访问应用商店安装了。以下介绍另一种安装方式：基于 react-devtools的GitHub项目源码编译进行插件安装。
react-devtools的安装
qq_36934775的博客
06-29 187
完整的安装方法 git clone https://github.com/facebook/react-devtools.git cd react-devtools //切换到工程目录 git checkout v3 // 切换到v3分支 cnpm install // 安装依赖 npm run build:extension:chrome //安装依赖成功后，打包一份扩展程序 在浏览器上打开chrome://extensions/ 点击 “开发者模式” 点击“加载已解压的扩展程序” 选择 reac
React DevTools 安装
csdn_poxiao的博客
04-02 954
4、打开chrome扩展程序chrome://extensions/，加载已解压的扩展程序，选择第3步中的生成的unpacked文件夹。1、去git上下载react-devtools文件到本地，https://github.com/facebook/react-devtools/tree/v3。并且会在你的项目目录中生成一个新的文件夹，react-devtools -> shells -> chrome -> build -> unpacked文件夹。3、安装依赖成功后，我们便可以打包一份扩展程序出来。
安装React Devtools调试工具
luluan_lin的博客
10-31 528
安装React Devtools调试工具的步骤： 去git上下载react-devtools文件到本地，react-devtools 用npm安装依赖 cd ~/Downloads/react-devtools-3 npm install 安装依赖成功后，打包一份扩展程序 npm run build:extension:chrome 打包完成之后，~/Downloads/react-dev...
安装react开发者工具react-devtools工具
m0_60322879的博客
05-05 488
11
安装React developer tools
m0_67388537的博客
07-27 717
react调试工具,像vue-devtool一样,可以方便的追踪调试state,props等实时状态.说明: 当前版本不推荐,在react-design-pro项目中会直接报错.
如何使用React Developer Tools
cuk0051的博客
08-25 3455
One very useful tool we absolutely need to install when building a React application, like a Next.js application for example, is the React Developer Tools. 我们在构建React应用程序时绝对需要安装的一个非常有用的工具(例如Next.js应...
react-devtools安装教程
06-28
1. 首先，你需要在你的项目中安装 React 开发工具。你可以通过运行以下命令来安装它： ``` npm install -g react-devtools...4. 安装完成后，你可以在你的 React 应用程序中使用 React 开发工具来调试和分析你的组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值