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

相关推荐
爬坑的小白21 小时前
vue 2.0 路由跳转时新开tab
前端·javascript·vue.js
爬坑的小白21 小时前
vue x 状态管理
前端·javascript·vue.js
凌览1 天前
一键去水印|5 款免费小红书解析工具推荐
前端·javascript·后端
有意义1 天前
栈数据结构全解析:从实现原理到 LeetCode 实战
javascript·算法·编程语言
鹿鹿鹿鹿isNotDefined1 天前
逐步手写,实现符合 Promise A+ 规范的 Promise
前端·javascript·算法
氵文大师1 天前
A机通过 python -m http.server 下载B机的文件
linux·开发语言·python·http
拉不动的猪1 天前
前端三大权限场景全解析:设计、实现、存储与企业级实践
前端·javascript·面试
封奚泽优1 天前
下降算法(Python实现)
开发语言·python·算法
笃行客从不躺平1 天前
遇到大SQL怎么处理
java·开发语言·数据库·sql
郝学胜-神的一滴1 天前
Python中常见的内置类型
开发语言·python·程序人生·个人开发