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

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

安装插件后,控制台出现 "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 方法,就输出了整个对象结构

相关推荐
心怀梦想的咸鱼12 小时前
OpenCode 接入 API 报错 read ECONNRESET:基于环境变量的证书校验绕过方案
开发语言·php
程序大视界13 小时前
【Python系列课程】Python入门教程
开发语言·人工智能·python
谭光志13 小时前
如何从零开始实现一个 AI Agent CLI
前端·javascript·ai编程
morning_judger13 小时前
Agent系列(二)-记忆系统的设计
开发语言·python·机器学习
方也_arkling13 小时前
【Java-Day02】语法篇:变量/数据类型/标识符/运算符/类型转换
java·开发语言
RSTJ_162513 小时前
PYTHON+AI LLM DAY SIXTY-ONE
开发语言·python
zfoo-framework13 小时前
理解kotlin limitedParallelism(1)与Actor模型
android·开发语言·kotlin
.千余13 小时前
【C++】C++类与对象3:const成员函数与取地址运算符重载,权限管理的艺术
开发语言·c++
影寂ldy13 小时前
C# 类和对象
开发语言·c#
丷丩13 小时前
MapLibre GL JS第25课:添加栅格瓦片源
开发语言·javascript·gis·mapbox·maplibre gl js