react-devtools安装教程

article/2025/10/8 11:19:54

有时候看网上各路大神,写如何安装react-devtools,大神就是大神,好多步骤一笔带过,导致一些学习者看的一脸懵逼,今天我给大家讲超级简单的react-devtools安装步骤,相信看过的小伙伴儿不存在懵逼状态,那就开始吧!首先声明一下,必须安装Node哦,都准备学react了,node都不叫事儿了吧,Let's go!

1.首先打开官网:https://github.com/facebook/react-devtools

发现好像搬家了,不慌不慌,继续走着

 

那咱就进去v3分支,地址:https://github.com/facebook/react-devtools/tree/v3,直接download ZIP格式

 

 

 2.知道下载位置,解压到自己可以找见的目录下,进入到react-devtools-3目录,cnpm i一下安装一下依赖

3.再进入到react-devtools-3\shells\chrome切换到chrome目录下,运行node build.js,当前目录下会生成build目录 这个build目录下的unpacked目录就是chrome中所需react-devtools的工具扩展程序包

4.打开谷歌浏览器,网址输入chrome://extensions/,

 

 选择react-detools-3目录下的shells->chrome中build目录中的unpacked即可

到此 react-devtools安装成功!

 


http://chatgpt.dhexx.cn/article/LgiNJLsU.shtml

相关文章

VUE3 VUE-DEVTOOLS 安装

VUE3 Vue-Devtools 正确安装,亲测有效 写在前面正确的安装方式下载源码编译安装 写在前面 最近在学习Vue3。学习Vue自然离不开debug。Vue官方发布了调试工具Vue-Devtools。 官方网址:Vue-Devtools。 对于Vue3,Vue-Devtools没有正式的发布&a…

如何在生产环境使用devtools?

经常会有在生产环境使用devtools插件的需求,但是看别人操作之后自己就老是忘记,在这儿记录一下在生产环境使用devtools的整个过程。 1、原理 其实是否使用devtools是根据Vue.config.devtools这个配置来决定的,这个配置在开发环境下会被设为t…

mac安装vue-devtools

一.先查看电脑是否安装了node 没有安装node则需要安装node mac 安装node.js 第一步:官网下载 访问nodejs官网,链接: https://nodejs.org/en/,选择红色选框内的点击安装。 LTS是稳定版。 Current是最新版本,最新的功能特性都在这…

devtool使用介绍(1)

devtool使用介绍1 SDK中devtool的工作流程2.4.1 使用 devtool add添加应用程序 SDK中devtool的工作流程 可扩展SDK的核心要件是一个命令行工具,称为devtool。该工具提供了许多功能,可以帮助你在可扩展的SDK中构建,测试和打包软件&#xff0c…

vue-devtools-简介、下载、安装、配置、使用

一、简介 vue-devtools是一款基于chrome游览器的插件,可以用于调试vue应用,也可以用来辅助我们找到各页面对应的Vue.js文件路径,这将极大地提高我们的开发和调试效率。 二、下载 下载路径:https://github.com/vuejs/vue-devtoo…

DevTools使用

Chrome DevTools是内嵌在Chrome浏览器里的一组用于网页制作和调试的工具。使用DevTools,可以在平时中的开发调试中极大的提高效率。 使用快捷键ctrlshifti或者f12可以直接打开开发者工具。 在DevTools开发者工具一共有九个部分。 Element 在这张图中,右…

下载、编译、安装、使用 vue-devtools

不少人都想下载 vue-devtools插件,但又不会做,今天我做个比较详细的笔记 查看当前的devtools的版本可以去这个网站看右侧的个v几点几的,就是版本号 github/vuejs/devtools 目录 第一个方法:使用极简插件 第一步:查…

Vue调试工具vue-devtools的安装与使用

目录 前言 一、vue-devtools是什么? 二、vue-devtools安装 1.下载vue-devtools工具 2.安装vue-devtools工具 三、vue-devtools的使用 总结 前言 主要介绍vue-devtools的安装与使用。 一、vue-devtools是什么? vue-devtools是一款基于chrome游览器…

devTools最新安装方法

VUE DevTools 最新安装方法 啊头疼!最近学习vue,要用到devtools,网上搜索资料,发现都不行,然后就试了好久好久,终于,成功了,接下来划重点!仔细看!&#xff0…

Devtools的简单使用

一.Devtools作用 方便我们实时地观察自己写的数据和组件的状况等。 二.安装 极简插件_Chrome扩展插件商店_优质crx应用 <template><div class""></div> </template><script> export default {data() {return {name:芜湖, //单项数据…

devtools安装

文章目录 一、devtools安装二、参考、推荐、补充 一、devtools安装 vue官网上找到vue-devtools的GitHub项目 https://github.com/vuejs/devtools 我选择放在E盘中新建的devtools文件中&#xff0c;解压 进入解压好的devtools-main文件夹中 这里默认已经下载了node 然后在…

使用浏览器这么多年,你真的了解DevTools吗?

Devtools是Web测试时每天都要用的工具&#xff0c;它提供了很多调试功能&#xff0c;可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集&#xff0c;很多功能并没用到过。 作为高频使用的工具&#xff0c;还是有必要好好掌握的。测试时在日常工作中提BUG…

前端开发工具DevTools的详细知识点总结(一)

文章目录 打开DevTools元素面板Style面板Computed面板devtools取色器 控制台面板基本功能介绍控制台应用 网络面板功能区介绍分析请求 结语 打开DevTools devtools,即Chrome 开发者工具&#xff0c;Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具&#xff…

最新版的配置热加载工具DevTools

最新版的配置热加载工具 DevTools 在SpringBoot开发调试中&#xff0c;如果我每行代码的修改都需要重启再调试&#xff0c;可能比较费时间&#xff1b;SpringBoot团队针对此问题提供了spring-boot-devtools&#xff08;简称devtools&#xff09;插件&#xff0c;用此插件提升开…

(十七)Spring Boot devtools

1、devtools简介 Spring Boot 提供了一组开发工具 spring-boot-devtools 可以提高开发者的工作效率&#xff0c;开发者可以将该模块包含在任何项目中&#xff0c;spring-boot-devtools 最方便的地方莫过于热部署了。 2、devtools 实战 2.1 基本用法 要想在项目中加入 devtoo…

libev事件驱动网络库从安装到使用

上次说到的select/poll模型&#xff08;传送门&#xff09;的特征在于每一个执行周期都会探测一次或一组事件&#xff0c;一个特定的事件会触发某个特定的响应。我们可以将这种模型归类为“事件驱动模型”。 相比其他模型&#xff0c;使用 select() 的事件驱动模型只用单线程&…

Libev documentation

2019独角兽企业重金招聘Python工程师标准>>> NAME libev - a high performance full-featured event loop written in C SYNOPSIS #include <ev.h> EXAMPLE PROGRAM // a single header file is required #include <ev.h>#include <stdio.h> // f…

libev库使用教程

libev是用C语言编写的高性能、全功能事件循环库&#xff0c;支持select&#xff0c;poll模型&#xff0c;也支持linux特定的epoll模型&#xff0c;一个小巧、易用的库。 环境准备&#xff1a;ubuntu 一、libev库支持的功能 官方文档&#xff1a;http://pod.tst.eu/http://cvs…

偷懒的网络框架libevent、libev框架介绍

libevent、libev框架介绍 前言概述libevent编译安装libeventlibevent的封装层次 IO事件检测的封装与api介绍事件管理器event_base构建事件管理器event_base_new释放事件管理器event_base_freeevent_reinitevent_get_supported_methodsevent_base_get_method事件循环event_base_…

libev实现分析

libev实现分析 libev是一个事件驱动库&#xff0c;底层是基于select、epoll、kqueue等I/O复用接口。所谓事件驱动库&#xff0c;就是用户定义一个事件以及改事件发生时调用的函数&#xff0c;该库会监听该事件&#xff0c;并在事件发生时调用相应的函数。 libev提供了很多事件…