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

相关推荐
咸虾米几秒前
在uniCloud云对象中定义dbJQL的便捷方法
前端·javascript
梨子同志2 分钟前
JavaScript Proxy 和 Reflect
前端·javascript
海的诗篇_4 分钟前
移除元素-JavaScript【算法学习day.04】
javascript·学习·算法
__Yx__7 分钟前
JavaScript核心概念输出——原型链
javascript
勤奋的知更鸟10 分钟前
Java编程之原型模式
java·开发语言·原型模式
珂朵莉MM23 分钟前
2021 RoboCom 世界机器人开发者大赛-高职组(初赛)解题报告 | 珂学家
java·开发语言·人工智能·算法·职场和发展·机器人
香蕉炒肉38 分钟前
Java优化:双重for循环
java·开发语言
挑战者66688839 分钟前
vue入门环境搭建及demo运行
前端·javascript·vue.js
xd0000244 分钟前
12.vite,webpack构建工具
react.js
傍晚冰川1 小时前
FreeRTOS任务调度过程vTaskStartScheduler()&任务设计和划分
开发语言·笔记·stm32·单片机·嵌入式硬件·学习