React Quantum

React Quantum0.2.0

React Quantum 解析您的 React 应用程序以创建其组件层次结构的颜色编码树模型。在悬停时,每个… React Quantum 解析您的 React 应用程序以创建其组件层次结构的颜色编码树模型。在悬停时,每个树节点将显示两个关键组件性能指标——渲染时间和重新渲染频率——以及记忆状态和道具,以指示具

官方版无广告15

更新日期:2021年 8月 29日分类标签:语言:中文平台:

829KB 0 人已下载 手机查看

简介:
React Quantum 解析您的 React 应用程序以创建其组件层次结构的颜色编码树模型。在悬停时,每个… React Quantum 解析您的 React 应用程序以创建其组件层次结构的颜色编码树模型。在悬停时,每个树节点将显示两个关键组件性能指标——渲染时间和重新渲染频率——以及记忆状态和道具,以指示具体是什么启动了渲染。热图的美妙之处在于:节点将根据组件的渲染性能改变颜色,从而可以轻松地一目了然地查明可能的瓶颈。 ?这个怎么运作*请注意* – React Quantum 利用 React Devtool 来提取有关您的 React 应用程序的信息。 – 请确保您的项目在 React 16.0+ 上运行,并且在使用 React Quantum 之前安装了 React Devtool。 – 由于捆绑期间组件名称的缩小,React Quantum 最适合以开发模式捆绑的项目。 1. 在任何使用 React 的页面上打开 Chrome Developer Tools (Inspect),然后单击 Developer Tools 面板顶部的 React Quantum。在 pssing 'Start Quantum' 后,持久连接将打开并存储在后台页面上。 2. 刷新页面或设置状态以触发重新渲染。当用户与 React 应用程序交互时,Mutation Observer 会监听 DOM 的变化并触发脚本注入来提取和解析页面的纤维树。 3. 将鼠标悬停在节点上可查看组件名称、类型、提交频率、渲染时间、当前状态和道具等信息。 4. React Quantum 使用开箱即用的热图值运行,但用户可以选择使用树顶部的百分比输入自定义热图。

相关资源

react-rpm
用于优化和调试的性能可视化工具React RPM 是一个 Chrome DevTool,配置为在您与 React.js 应用程序交互时自动实时捕获和显示性能数据,使您能够快速识别瓶颈并使用 pcision 衡量整体效率。从 Chrome 商店下载 DevTool 后,只需安装 npm 模块(npm install
HackBar
一个黑客酒吧。这个插件是用 webextension 编写的,是原始 Hackbar 的 XUL 版本的替代品。按 F12 使用 HackBar帮助开发反爬虫的工具:请求分析、加密、编码、Json 响应格式、大小写转换等。更新新标志。
Search center aligner
搜索中心对准器搜索中心内容的对齐方式尽情享受,不要转头!海豹会给每一天的心情。如果你有一个大显示器。 1.4版: - 修复谷歌更新- 修复 yandex 更新- 添加 duckduckgo 1.3 版: - 谷歌和 yandex 图像页面修复- 权限编辑- 对屏幕的依赖- 图标
colorexa
通过键入或突出显示其十六进制代码来快速查找颜色。一个简单的工具,用于查找指定为十六进制格式的 RGB 三元组的颜色。弹出气泡的背景会自动刷新以表示在其文本字段中键入的颜色或在页面中突出显示的颜色。支持完整(六位)和缩写(三位)十六进制颜色代码。当您想快速检查在页面或样式表的源代码中找到的颜色时很有用。访问扩展程序
PaletteAble
此扩展程序从活动网页中获取调色板。这是一个简单的扩展程序,它将从活动的 Chrome 选项卡中提取所有背景颜色,并生成一个带有令人愉悦的调色板的弹出窗口。将鼠标悬停在 rgba 值的色样上,然后单击云图标以下载 CSS 风格的调色板导出。新功能和改进即将推出,此扩展将始终免费!
WebRTC Desktop Sharing Extension
允许 WebRTC 应用程序的桌面共享的扩展。 WebRTC 桌面共享扩展提供对 WebRTC 应用程序桌面共享的访问。第三方许可许可证-----------------------麻省理工学院执照版权所有 (C) 2012 马德里理工大学。特此向任何获得副本的人免费授予许可本软件和相关文档文件(“软件”),以处

暂无评论

暂无评论...