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

相关推荐
cui_ruicheng3 分钟前
C++11新特性(中):右值引用与移动语义
开发语言·c++·c++11
2401_873204654 分钟前
C++与Node.js集成
开发语言·c++·算法
小小张自由—>张有博7 分钟前
【深度解析】从 claude 命令到 cli.js 的完整执行链路
开发语言·javascript·ecmascript
阿kun要赚马内8 分钟前
Python——异常捕获
开发语言·python
☆56610 分钟前
基于C++的区块链实现
开发语言·c++·算法
于先生吖22 分钟前
JAVA 本地生活服务项目实战 家政 5.0 系统前后端分离部署
java·开发语言·生活
计算机安禾24 分钟前
【数据结构与算法】第5篇:线性表(一):顺序表(ArrayList)的实现与应用
c语言·开发语言·数据结构·c++·算法·visual studio code·visual studio
ghie909025 分钟前
C# WinForms 条形码生成器(含保存和打印预览功能)
开发语言·c#
霑潇雨27 分钟前
题解 | 深入分析各款产品年总销售额与竞品的年度对比
大数据·开发语言·数据库
2401_8649592828 分钟前
C++与Python混合编程实战
开发语言·c++·算法