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

相关推荐
SamsongSSS几秒前
JavaScript逆向Vue处理事件和捕获错误的核心逻辑
前端·javascript·vue.js·逆向
码银几秒前
【简易聊天室】使用 HTML、CSS、JavaScript 结合 WebSocket 技术实现
javascript·css·node.js·html
桃子不吃李子7 分钟前
一些工具的使用
javascript·mongodb·node.js
ANGLAL8 分钟前
25.Spring Boot 启动流程深度解析:从run()到自动配置
java·开发语言·面试
Momentary_SixthSense43 分钟前
serde
开发语言·rust·json
MediaTea1 小时前
Python 文件操作:JSON 格式
开发语言·windows·python·json
2501_930707781 小时前
使用C#代码添加或删除PPT页面
开发语言·c#·powerpoint
百锦再1 小时前
金仓数据库提出“三低一平”的迁移理念
开发语言·数据库·后端·python·rust·eclipse·pygame
茉莉玫瑰花茶1 小时前
从零搭建 C++ 在线五子棋对战项目:从环境到上线,全流程保姆级教程
开发语言·c++
卡卡酷卡BUG1 小时前
2025年Java面试题及详细解答(MySQL篇)
java·开发语言·mysql