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

相关推荐
zzzzzz31038 分钟前
react-bits:酷炫组件之外,React 页面表现力真正该怎么借力?
react.js·开源·动效
tianyu23438 分钟前
Java 正则表达式终极指南:从 Pattern 到 Matcher,从双重转义到性能优化,一篇全搞定
java·开发语言·正则表达式·group·find·pattern·matcher
caimouse2 小时前
ReactOS 窗口系统分析(23):键盘 — keyboard.c + kbdlayout.c
c语言·开发语言·计算机外设
Emily156853598703 小时前
Emerson 1C31129G03 Analog Input Module
java·开发语言·前端·plc·emerson·1c31129g03·input module
就叫_这个吧8 小时前
Java递归方法实现面包屑导航
java·开发语言
fīɡЙtīиɡ ℡8 小时前
AI 应用系统设计
java·开发语言·人工智能
今天AI了吗9 小时前
Python 基础语法(一):常量、变量、输入输出与运算符
开发语言·数据库·人工智能·python·sql·深度学习·机器学习
风月说与山鬼9 小时前
三、大括号语法
前端·react.js
kyriewen10 小时前
我把最常踩的8个CORS跨域报错整理了一遍——第8个去年还不存在
前端·javascript