安装 React 开发者工具（react-devtools）

最新推荐文章于 2024-06-26 21:57:42 发布
最新推荐文章于 2024-06-26 21:57:42 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： Web前端 项目 文章标签： chrome react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41568313/article/details/118728590
版权
本文详细指导如何从GitHub下载并安装React DevTools。首先从git获取文件，然后在本地文件夹通过npm安装依赖，接着打包扩展程序，最后在Chrome浏览器中启用开发者模式加载扩展，设置快捷键后即可使用。
摘要由CSDN通过智能技术生成

1.先去git上下载react-devtools文件到本地

https://github.com/facebook/react-devtools/tree/v3

2.进去下载下来的文件夹

同时按下shift+鼠标右键，打开命令窗口

3.npm依赖安装

npm --registry https://registry.npm.taobao.org install

4.安装依赖成功后，打包一份扩展程序

npm run build:extension:chrome 

5.安装到Chrome浏览器上

最低0.47元/天 解锁文章
Lucivita
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react Chrome插件开发者工具 react-devtools
06-18
解压压缩包，打开Chrome扩展程序的开发模式，加载解压文件选中解压的文件即可。
React-devtools-3.6.0.zip（最新版chrome的React插件）
07-28
chrome谷歌浏览器，打开空白页，地址栏chrome://extensions/打开扩展程序页面（开发者模式），将下载的React-devtools-3.6.0.zip拖拽到该页面，安装成功。
利用浏览器DevTools中对React项目进行内存泄露排查
最新发布
SCUhzs
06-26 913
场景：用户在某个页面操作时，在监控平台收集到的数据表现为内存占用有逐步提高的趋势，最先想到的是 DOM 元素卸载后其 JavaScript 对象未能被垃圾回收这类内存泄漏问题。同时，如果在 DOM 元素删除时没有完全清理其对应的 JavaScript 引用，那么内存占用就会只增不减，最终影响用户体验。
React-DevTools开发者工具安装
席木木的博客
10-03 7875
React开发者工具最简单的安装方式自然是科学上网，通过Google Chrome浏览器访问应用商店安装了。以下介绍另一种安装方式：基于 react-devtools的GitHub项目源码编译进行插件安装。
react调试工具react -devtools的安装
马娟的博客
10-11 4097
    前言     react-devtools是什么？         react-devtools是一款由 facebook 开发的有用的 Chrome浏览器扩展。通过它我们可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。 安装React Devtools有两种方法： 方法一：chrome商店上直接下载（前提是该电脑已经翻墙）。     ...
react-devtools
软工二班秦同学的博客
10-07 725
学会使用react-devtools调试工具，在浏览器中对react代码进行调试
React的浏览器扩展react-devtools.zip
07-19
React Devtools 可以在 Chrome 和 Firefox 开发者工具审查 React 组件的浏览器扩展。 标签：react
react开发者工具,react开发者工具,react开发者工具
01-08
React开发者工具是一款强大的JavaScript库，专门用于调试基于React技术构建的Web应用程序。这款工具作为浏览器扩展，可以在Chrome和Firefox等主流浏览器中安装，为开发者提供深入理解React组件层次结构、状态变化...
react-devtools-3
09-07
总的来说，"react-devtools-3" 提供了强大的 React 应用调试和性能优化工具，对于前端开发者来说是不可或缺的助手。通过深入理解和熟练使用这个插件，开发者可以提升开发效率，确保 React 应用的质量和性能。
react-devtools.zip
06-05
而React DevTools就是在这个背景下应运而生的，它是React开发者不可或缺的辅助工具。 React DevTools主要分为两个部分：`Components` 和 `Profiler`。在`Components`面板中，你可以看到应用中的所有React组件及其...
react-devtools-2.5.0.zip
08-18
chrome react devtools插件
react-devtools-3.2.3.crx
07-02
目前最新版的react devtool工具插件，鉴于网上的要下载的都是2.5.2.crx版本的，而且需要的积分比较大，所以在这里分享一下最新版的插件。chrome React DevTool react-devtools 3.2.3.crx React开发工具。
React devtools最新
01-11
eact React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
react-devtools 2.5.2.crx
02-01
chrome React DevTool react-devtools 2.5.2.crx React开发工具
react-devtools 的谷歌扩展程序
08-01
React DevTools 是一款非常重要的开发工具...总的来说，React DevTools是React开发者不可或缺的工具，它极大地提升了开发效率和问题排查能力。正确安装和使用这款扩展程序，可以帮助你更好地理解和优化你的React应用。
react-devtools的安装
qq_36934775的博客
06-29 165
完整的安装方法 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 Developer Tools带你掌握9个React组件调试技巧，十分钟学会
03-03 2745
（它可能是一个其它组件）是否正常怎么办呢？的使用情况，以及如何定位某个组件在哪个文件被创建，某个组件又是在哪个文件被使用的习惯，了解到的情况是部分同学没使用。你可能会用到的所有场景以及技巧，我相信在掌握这些小技巧之后对于你未来的开发会有极大的帮助，而关于另一个工具。官方推出的开发者插件，可以毫不夸张的说，它在我们日常组件开发中，对于组件属性以及文件定位，中某个方法是在哪定义的，它可能是从隔了五六层的组件所传递，假设这个方法名像。有同学就说了，我怎么没这个图标按钮，其实只需要一个简单的配置就好了，大家复制。
react-devtools安装教程
06-28
1. 首先，你需要在你的项目中安装 ...- 安装完成后，你可以在 Chrome 浏览器的开发者工具中找到 React 开发工具的选项卡。 4. 安装完成后，你可以在你的 React 应用程序中使用 React 开发工具来调试和分析你的组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值