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

相关推荐
“AI国潮设计-小江”7 分钟前
Python实战 | SDXL批量生成“潮汕英歌舞”国潮甜品IP,附核心Prompt与商用授权思路
开发语言·人工智能·python·prompt·aigc
H.莓飛17 分钟前
【数据结构】栈
linux·开发语言·数据结构·算法·centos
无糖可乐没有灵魂20 分钟前
用一篇文章来精通“进程/线程/协程/锁“多并发任务
开发语言·php
2601_9628857220 分钟前
如何用 Python 分析股票的日历效应?(星期效应与月份效应,附数据挖掘陷阱)
开发语言·python·数据挖掘
“AI国潮设计-小江”32 分钟前
Python实战 | SDXL批量生成“带炸英歌”国潮IP:从海报到门店落地(附核心Prompt与授权思路)
开发语言·人工智能·python·prompt·aigc
字节渡客34 分钟前
PHP项目复盘:foreach 引用残留造成的诡异数据错乱
开发语言·php
我就是不信37 分钟前
深入理解 Python 虚拟机:字典(dict)的优化
开发语言·python·哈希算法
艾莉丝努力练剑43 分钟前
【QT】系统相关:多线程QThread基础
开发语言·网络·c++·qt·学习·大模型
ysu_03141 小时前
uv实战指南-从Python版本虚拟环境到pyproject依赖管理
开发语言·python·pip·uv·虚拟环境·包管理·依赖管理