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

相关推荐
froginwe116 分钟前
MySQL UNION 操作详解
开发语言
ruxshui6 分钟前
Python多线程环境下连接对象的线程安全管理规范
开发语言·数据库·python·sql
雨季6667 分钟前
Flutter 三端应用实战:OpenHarmony 简易点击计数器与循环颜色反馈器开发指南
开发语言·flutter·ui·ecmascript·dart
望眼欲穿的程序猿8 分钟前
Ai8051U+DHT11温湿度!
java·开发语言
xcs194059 分钟前
前端 项目构建问题 \node_modules\loader-runner\lib\loadLoader.js
开发语言·前端·javascript
一人の梅雨10 分钟前
VVIC图片搜索接口进阶实战:服装批发场景下的精准识图与批量调度方案
开发语言·机器学习·php
s1hiyu13 分钟前
实时控制系统验证
开发语言·c++·算法
AC赳赳老秦15 分钟前
科研数据叙事:DeepSeek将实验数据转化为故事化分析框架
开发语言·人工智能·数据分析·r语言·时序数据库·big data·deepseek
楼田莉子20 分钟前
C++现代特性学习:C++14
开发语言·c++·学习·visual studio
2301_7657031423 分钟前
C++代码复杂度控制
开发语言·c++·算法