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

相关推荐
罗丹丹Luna几秒前
JavaScript计算任务峰值并发:同一时刻先结束还是先开始
javascript
Aurorar0rua4 分钟前
CS50 x 2024 Notes Python - 02
开发语言·python·学习方法
zyseo813 分钟前
谷歌SEO 网站迁移 301 映射脚本:旧站 URL 自动匹配新站结构
开发语言·python
古夕13 分钟前
同样的 font-weight,为什么这个项目的字体就是更细?
前端·javascript
清水白石00822 分钟前
React Native与Flutter长期维护成本对比
开发语言·数据库
麦序子26 分钟前
用 Python + python-docx 批量生成带表格样式的装修报价单 Word 文档(含合计公式)
开发语言·python·自然语言处理·word·python3.11
1-1=036 分钟前
Python PyCharm
开发语言·python·pycharm
牛肉胡辣汤40 分钟前
Blender + Three.js 开发讲解:从 .blend 到能转的产品页
开发语言·javascript·blender
惊讶的猫42 分钟前
Spring AOP
java·开发语言
ii_best1 小时前
按键精灵手机助手 v5.2.1 实测:inputText 逐字延时 + 调试面板多行复制,安卓脚本开发的两个输入痛点一次解决
android·开发语言·智能手机·自动化·ai编程·按键精灵