React 调试开发插件 React devtools 的使用

news2024/11/23 1:30:23

可以在谷歌扩展应用商店里获取这个插件。如果不能访问谷歌应用商店,可以点此下载最新版

安装插件后,控制台出现 “Components” 跟 “Profiler” 菜单选项。

查看版本,步骤:

 

下面介绍 react devtools 的使用方式。

在 Components 处,可以看到整个 React 应用的组件数。

可以通过搜索框搜索相应的组件,当应用功能复杂时这个功能好用。

右窗口显示组件具体的属性。

比如,点击左边的第一个ListItem,右边显出它的 props 相关属性、事件处理函数等等。

当在 Element 处点击任意 DOM 元素的时候,可以看到有个 “==$0”,可以通过 "$0" 获取相关的 DOM 节点。

在 Console 处输入 $0 可以获取到该元素

同样地,在 Components 处选中某一个React组件后,可以在 Console 处将当前选中的 React 元素输出。

比如,在 Components 处选中一个 React 组件

在 Console 处输入 $r,就输出了该组件的实例

输入 $r.render() 执行 render 方法,就输出了整个对象结构

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/892374.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

改进YOLO系列:1.添加SE注意力机制

添加SE注意力机制 1. SE注意力机制论文2. SE注意力机制原理3. SE注意力机制的配置3.1common.py配置3.2yolo.py配置3.3yaml文件配置 1. SE注意力机制论文 论文题目:Squee…

人工智能原理(10)

目录 一、进化计算 1、概述 2、进化算法搜索方式特点 二、遗传算法 1、遗传算法的基本原理 三、进化规划 1、标准进化规划 2、进化规划的基本技术 四、进化策略 1、进化策略及其改进 2、进化策略基本技术 一、进化计算 1、概述 进化计算包括遗传算法、进化规划、进…

安装IIS服务

什么是IIS服务 IIS(Internet Information Services)是微软公司开发的一款用于托管和管理Web应用程序的服务软件。IIS服务是一种在Windows操作系统上运行的Web服务器,它能够处理HTTP(Hypertext Transfer Protocol)和HTT…

《Kubernetes部署篇:Ubuntu20.04基于外部etcd+部署kubernetes1.24.16集群(多主多从)》

一、架构图 如下图所示: 二、环境信息 1、部署规划 主机名K8S版本系统版本内核版本IP地址备注k8s-master-631.24.16Ubuntu 20.04.5 LTS5.15.0-69-generic192.168.1.63master节点 + etcd节点k8s-master-641.24.16Ubuntu 20.04.5 LTS5.15.0-69-generic192.168.1.64master节点 + …

【TA 挖坑02】RayMarching SDF 物体黏合

写在前面 由于实习和忙着论文很久没经营博客了,最近以各种方式收集到了一些想实现的效果,其中一个就是卡通云融合、变大变小、聚散收拢的效果如何实现的问题,这就不得不提搁置了很久的RayMarching... 挖坑!整理一下有帮助的文章…

origin修改默认的字体等

因为默认是中文宋体,每次切换成英文尤其是希腊字母就很麻烦。 选择菜单栏的【设置】——【选项】点击。 弹出窗口中选择【文本字体】 设置成你需要的字体就好。 这里同样可以更改页面、图等的默认设置。 效果: 选择插入文字后,自动更改成…

PyQt5登录界面跳转

目录 1、设计ui界面 2、设计逻辑代码,实现登录界面跳转 3、结果 1、设计ui界面 设计后的ui界面 在这里可以设置密码不显示 这里可以设置快捷键 最后将ui界面转为py文件后获得的逻辑代码为:(文件名为Login.py) # -*- coding: u…

Windows上使用dump文件调试

dump文件 dump文件记录当前程序运行某一时刻的信息,包括内存,线程,线程栈,变量等等,相当于调试程序时运行到某个断点上,把程序运行的信息记录下来。可以通过Windbg打开dump,查看程序运行的变量…

DispatcherServlet doDispatch()方法解析(1)

目录 简介doDispatch() 源码解析this.mappingRegistry 简介 在DispatcherServlet类中, 最关键的就是doDispatch()这个方法, 每一次请求都需要经过这个方法, 对每个请求进行转发, 通过反射调用对应的方法 doDispatch() 源码解析 可以看到最关键的代码就是1047行, 根据请求对象…

Python规范

PEP8 风格指南: 缩进,用 4 个空格,不要用制表符。(Python 不允许混合制表符和空格进行缩进。)换行,一行不超过 79 个字符。用空行分隔函数和类,及函数内较大的代码块。 用两个空行包围顶级函数和类定义。类内的方法定…

算法通关村第十关 | 数组中第k个最大元素

1.数组中第k大的数字 题目: LeetCode:数组中的第k个最大元素,给定整数数组nums和整数k,请返回数组中第k个最大的元素,请注意,你需要找的是数组排序后第k个最大的元素,而不是第k个不同的元素。 运…

【【STM32-SPI通信协议】】

STM32-SPI通信协议 STM32-SPI通信协议 •SPI(Serial Peripheral Interface)是由Motorola公司开发的一种通用数据总线 •四根通信线:SCK(Serial Clock)、MOSI(Master Output Slave Input)、MISO…

stm32F103R6实现流水灯参考源代码

#include "main.h" #include "gpio.h" void SystemClock_Config(void); void sleep(int a) {int i0,j0;for(i0;i<a;i){for(j0;j<2000;j);}} 真正发挥效果的是这个main函数// int main(void) {int i0;HAL_Init();SystemClock_Config();MX_GPIO_Init()…

4.UE数字人工程运行逻辑及程序逻辑

1.Fay-UE5数字人工程导入 2.UE数字人语音交互 3.UE基本操作及数字人工程模块组成&#xff08;UE数字人系统教程&#xff09; 一、3个状态&#xff1a;鸡汤广告、交互&#xff08;聊天与否&#xff09;、跳舞 1、启动即开始循环鸡汤广告模式 2、第一次交互&#xff08;助理版…

gromacs教程练习1

gromacs能在win上运行&#xff0c;还是个开源的软件&#xff0c;这都很值得入手学习 记录下gromacs教程的练习情况&#xff1a; Lysozyme in water 水中的溶菌酶&#xff0c;嗯&#xff0c;估计就是把蛋白处理后放在显试溶剂里跑MD这个模拟。 1、文件的准备&#xff1a; 1、…

JVM虚拟机:初始化的介绍

本文重点 我们前面学习了三个步骤: 装载 连接 初始化 初始化 初始化的时候,会为静态成员变量赋值初始值,它有两种方式: ①声明类变量是指定初始值 ②使用静态代码块为类变量指定初始值 例子 最后输出的结果为3,它的过程是这样的: main方法中输出T.count,由于count是…

产品经理如何提高用户画像效果?SIKT模型

产品经理做用户画像&#xff0c;最担心被业务方反馈&#xff1a;没效果。这往往是由用户画像与业务场景脱节造成的。那么我们该如何从业务场景出发&#xff0c;让用户画像更有效&#xff1f;一般来说&#xff0c;我们可以采用SIKT模型解决这个问题。 用户画像 ​ 1、SIK…

使用CLI添加磁盘到VM

登录 https://portal.azure.com/#home&#xff0c;点击右上角的控制台图标 &#xff0c;打开CLI 在控制台中输入如下指令&#xff0c;在NetworkWatcherRG创建一个名字为TEST的虚拟机&#xff0c;使用的镜像是Win2019datacenter&#xff0c;username是aaa,password是1234567890A…

SpringBoot 操作Redis、创建Redis文件夹、遍历Redis文件夹

文章目录 前言依赖连接 RedisRedis 配置文件Redis 工具类操作 Redis创建 Redis 文件夹查询数据遍历 Redis 文件夹 前言 Redis 是一种高性能的键值存储数据库&#xff0c;支持网络、可基于内存亦可持久化的日志型&#xff0c;而 Spring Boot 是一个简化了开发过程的 Java 框架。…

JDBC Vertica Source Connector 使用文档

支持以下引擎 Spark Flink SeaTunnel Zeta 关键特性 批处理 精确一次性处理 列投影 并行处理 支持用户自定义拆分 支持查询 SQL 并实现投影效果 描述 通过 JDBC 读取外部数据源数据。 支持的数据源信息 DatasourceSupported versionsDriverUrlMavenVerticaDifferent depen…