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

相关推荐
烛阴31 分钟前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript
wayhome在哪41 分钟前
3 分钟上手!用 WebAssembly 优化前端图片处理性能(附完整代码)
javascript·性能优化·webassembly
明月看潮生1 小时前
编程与数学 02-017 Python 面向对象编程 23课题、测试面向对象的程序
开发语言·python·青少年编程·面向对象·编程与数学
TPBoreas1 小时前
架构设计模式七大原则
java·开发语言
web前端1232 小时前
# 多行文本溢出实现方法
前端·javascript
人间观察员2 小时前
如何在 Vue 项目的 template 中使用 JSX
前端·javascript·vue.js
EndingCoder2 小时前
安装与环境搭建:准备你的 Electron 开发环境
前端·javascript·electron·前端框架
Lucky_Turtle2 小时前
【electron】一、安装,打包配置
javascript·arcgis·electron
Running_slave2 小时前
Web跨标签页通信应该怎么玩?
javascript·css·后端
nightunderblackcat2 小时前
新手向:Python开发简易股票价格追踪器
开发语言·python