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 方法,就输出了整个对象结构

相关推荐
ayqy贾杰12 分钟前
Claude Code 重构,并行化或终结 IDE 时代
前端·javascript·面试
XDHCOM14 分钟前
Python os.system() 和 subprocess 怎么选?运行系统命令哪个更好用?
开发语言·网络·python
tanis_31 小时前
MinerU JS/TS SDK 深度指南:JavaScript/TypeScript 开发者的 PDF/文档解析利器
javascript
xixixi777771 小时前
AI自主挖洞 + 通信网络扩散:全域风险指数级放大,如何构建密码-沙箱-终端联动闭环?
开发语言·网络·人工智能·ai·大模型·php·通信
颜酱1 小时前
智能体与工作流:从「想做一个应用」到「能跑通一条链」
前端·javascript·人工智能
小碗羊肉1 小时前
【从零开始学Java | 第三十五篇】IO流-字节流
java·开发语言
槐序十七^1 小时前
某坤行md5__1101 请求头zkhs 分析
javascript·js逆向·python爬虫·md5__1101·sha1加密
csbysj20202 小时前
SOAP Fault 元素
开发语言
Soari2 小时前
Ziggo-CaaS-Switch软件配置: undefined reference to pthread_create
java·开发语言·fpga开发·tsn·zynq·交换机配置
wjs20242 小时前
jEasyUI 树形网格动态加载详解
开发语言