react安装react development tools插件(edge浏览器)

已于 2022-07-14 22:28:11 修改
阅读量2.9k 收藏 1
点赞数 4
分类专栏： react 文章标签： react
于 2022-07-14 22:24:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45877477/article/details/125793820
版权

目录

一 下载

二 安装插件到egde浏览器

1 添加插件到浏览器

2 插件使用

一 下载



Download React Developer Tools 4.24.7 CRX File for Chrome - Crx4Chrome

链接：https://pan.baidu.com/s/1dxKq05yPJfgMDgm5TtV43Q 
提取码：reac

二 安装插件到egde浏览器

1 添加插件到浏览器

在edge浏览器输入地址: edge://extensions/

进入到插件管理页面

勾选 开发人员模式 -- 把下载好的插件拖过来 -- 添加扩展

2 插件使用

重新启动react项目

edge浏览器, F12打开开发者工具,可以看到多了Components 和  Profiler

 未安装插件之前是这样子的

Components 

 

Profiler

​​​​​​​

梨轻巧
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react的浏览器所用插件
07-24
react-devtools redux-devtools
react浏览器插件的安装与使用、Redux DevTools【详细】
weixin_46435234的博客
08-16 1499
1.安装插件【安装好之后不能直接使用】 2. 配置Redux DevTools插件 项目目录下：yarn add redux-devtools-extension 在store/index.js中： import {composeWithDevTools} from 'redux-devtools-extension' const store = createStore(addReducer, composeWithDevTools())//createStore没有第二个参数的情况，就将co
react【实用教程】 搭建开发环境（2024版）Vite+React （官方推荐）（含浏览器插件 react-developer-tools 和 Redux DevTools 的下载和安装）
最新发布
m0_60559048的博客
05-13 235
以项目名reactDemo为例。
使用react开发chrome插件
weixin_41897680的博客
11-17 3788
使用react开发谷歌插件
记react比较好用的插件及使用方法，不常用的功能性代码（最新更新时间 2023-8-23）
qq_36361032的博客
06-01 1473
一、html存储为pdf // 参考地址：https://blog.csdn.net/weixin_48003149/article/details/121333196 //先安装这两个插件 import jsPDF from 'jspdf' import html2canvas from 'html2canvas'; const handleExportPdf = async (refs) => { ///refs是个对象，里面是需要保存为pdf的ref，ref只能是原始元素，比如说div，不能是组件
前端 浏览器安装 vue react 插件
Thekingyu的博客
05-04 1392
应用场景 可以使用Jquery Ajax 发送本页面请求 插件是否适用测试 或者操作页面dom去除遮挡 欢迎补充。类似插件 经测试 vue react 普通插件都可以使用 dayjs js-pinyin 等等。在浏览器 console 中粘入 以上代码 回车。
手把手安装react开发调试工具
weixin_53273394的博客
03-01 579
chrome安装react开发调试工具
react development tools插件(edge浏览器)
09-01
react development tools插件(edge浏览器)
Chrome浏览器插件 React Developer Tools
05-11
React Developer Tools是开发 React 必备的开发者工具扩展。可以在Chrome开发者工具中得到一个名为React的新标签，检查React组件层次结构，在页面上显示React组件。 Adds React debugging tools to the Chrome ...
react 浏览器调试插件 react devloper tools
06-17
react 插件 react devloper tools，方便在浏览器内调试react页面
react developer tools谷歌调试插件
05-16
react developer tools谷歌调试插件react developer tools谷歌调试插件react developer tools谷歌调试插件react developer tools谷歌调试插件react developer tools谷歌调试插件react developer tools谷歌调试插件...
React Developer Tools 开发工具 | 谷歌（Chrome）浏览器插件
11-25
该文件由https://github.com/facebook/react-devtools.git编译得到 解压后拖拽到扩展程序中即可
来用Vite+React快速开发浏览器插件
小陈的博客
11-08 739
写到这里，我们也就顺利的实现了简化版Promise的封装，也实现其主要功能，虽然我们没有封装的Promise没有官方版那么强大，但是我们可以清晰的看到Promise的原理最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
react-devtools
软工二班秦同学的博客
10-07 683
学会使用react-devtools调试工具，在浏览器中对react代码进行调试
使用React/Vue开发Chrome 插件
frontend_frank的博客
12-19 450
本文代码：https://github.com/nyqykk/hello-extensions-react阅读本文你将了解到Chrome 插件整体架构；如何开发一个 Chrome 插件（Popup 和 Devtools）；如何使用前端框架（React/Vue）进行开发；如何调试插件；如何使用 Puppeteer 对插件进行 E2E 测试（本地和 CI 环境）。整体架构介绍明确概念Chrome 插件...
React Developer Tools带你掌握9个React组件调试技巧，十分钟学会
03-03 2120
（它可能是一个其它组件）是否正常怎么办呢？的使用情况，以及如何定位某个组件在哪个文件被创建，某个组件又是在哪个文件被使用的习惯，了解到的情况是部分同学没使用。你可能会用到的所有场景以及技巧，我相信在掌握这些小技巧之后对于你未来的开发会有极大的帮助，而关于另一个工具。官方推出的开发者插件，可以毫不夸张的说，它在我们日常组件开发中，对于组件属性以及文件定位，中某个方法是在哪定义的，它可能是从隔了五六层的组件所传递，假设这个方法名像。有同学就说了，我怎么没这个图标按钮，其实只需要一个简单的配置就好了，大家复制。
使用 React 创建 Chrome 扩展：分步指南
iCloudEnd的博客
02-15 577
在我们深入开发过程之前，您需要对 React 及其核心概念有一个基本的了解。您还应该对 JavaScript 和 HTML 有基本的了解。此外，您还需要以下工具：谷歌浏览器Visual Studio Code 或任何其他代码编辑器Node.js 和 npm（节点包管理器）
react 常用插件安装：详细教程
wbskb的博客
07-22 289
Auto Rename Tag、emment、Prettier - Code formatter、 Default Formatter
react 浏览器插件
09-01
React浏览器插件是一种可以在浏览器中使用React框架的扩展程序。通过安装这样的插件，用户可以在浏览器中使用React的功能，例如创建和管理组件、使用状态和属性、处理页面事件等。React浏览器插件可以帮助开发人员更好地调试和测试React应用程序，并提供更好的开发体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【React】从零搭建一个纯前端起始页浏览器插件（二）：搜索框关键词推荐（搜索建议）](https://blog.csdn.net/Howie_Why/article/details/125095362)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值