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

相关推荐
梦里不知身是客114 分钟前
spark中如何调节Executor的堆外内存
大数据·javascript·spark
代码or搬砖14 分钟前
Java集合-Set讲解
java·开发语言
艾上编程15 分钟前
第三章——爬虫工具场景之Python爬虫实战:学术文献摘要爬取,助力科研高效进行
开发语言·爬虫·python
明洞日记22 分钟前
【数据结构手册008】STL容器完全参考指南
开发语言·数据结构·c++
静小谢31 分钟前
前后台一起部署,vite配置笔记base\build
前端·javascript·笔记
用户47949283569151 小时前
改了CSS刷新没反应-你可能不懂HTTP缓存
前端·javascript·面试
jllllyuz1 小时前
matlab使用B样条进行曲线曲面拟合
开发语言·matlab
wangan0941 小时前
不带圆圈的二叉树
java·前端·javascript
ku_code_ku1 小时前
python bert_score使用本地模型的方法
开发语言·python·bert
小马哥编程2 小时前
【软考架构】滑动窗口限流算法的原理是什么?
java·开发语言·架构