React-Sight | 交互式树图
React-Sight插件概述
一个 Chrome Developer 工具,它显示了 React 应用程序的组件层次结构 — 非常适合您自己的项目和学习组织如何构建自己的项目。将 React Sight 添加到浏览器后,您的 Chrome 开发工具中将会有一个新标签。React Sight 将读取 React 的虚拟 DOM,并呈现页面上呈现的组件的交互式树图。通过悬停在节点上,您可以看到组件状态和道具以及它们如何实时变化。
React-Sight插件使用方法
1、安装 React Dev 工具
2、安装 React Sight
3、运行 React 应用程序,或者打开 (几乎!) 运行 React 的任何网站!打开 Chrome Developer Tools-> 单击 React Sight panel
4、如果您正在运行本地文件 url,请确保启用 “允许访问文件 url”在 React Dev 工具和 React Sight的扩展设置。
插件下载地址: