文件名称：实现：一个React组件树可视化器
文件大小：670KB
文件格式：ZIP
更新时间：2024-02-19 21:19:58
react d3 chrome-extension reactjs firefox-extension
实现React 随着React应用程序的扩展，跟踪状态和全面了解组件层次结构变得更加困难。 Realize是一个工具，可帮助开发人员可视化其React应用程序的结构和状态流，尤其是在规模和复杂性不断增长的情况下。 当前支持React v.16.8。 :laptop_computer: 如何使用它 从商店和商店安装扩展程序 导航到您的React网站 打开开发工具窗口，然后选择“实现面板” 触发状态更改以查看组件树 先决条件 实现需要在使用之前安装React Dev Tools。 Realize最好用于未部署的应用程序。 部署网站的这种丑陋使得组件结构变得难以阅读。 :fire: 主要特点 缩放和平移-按住Shift键可在树上拖动和缩放（对于最近的人，只需单击中心按钮） 组件焦点-单击节点以在右侧和面板中查看状态，道具和子代状态流-单击“状态”切换以在树上显示状态流。 有状态组件具有蓝色节点，状态流由蓝色链接显示搜索并突出显示-在搜索栏中输入组件名称以查看所有匹配节点的脉动 :laptop_computer: 本地安装 将存储git clone https://github.
【文件预览】：
Realize-master
----package.json(1KB)
----package-lock.json(474KB)
----webpack.config.js(3KB)
----assets()
--------logo150.png(15KB)
--------realizeLogoPNG.png(34KB)
--------treeVisCropped1.gif(264KB)
--------LogoAnimSmall.gif(25KB)
----LICENSE(1KB)
----tsconfig.json(31B)
----__tests__()
--------demo.test.js(9KB)
----README.md(3KB)
----extension()
--------128.png(12KB)
--------libraries()
--------32.png(1KB)
--------devtools()
--------16.png(616B)
--------backend()
--------48.png(3KB)
--------manifest.json(440B)