应用截图
详细介绍
React 组件树可视化工具
随着 React 应用规模扩大，跟踪状态并全面了解组件层级会变得更加困难。Realize 帮助开发者可视化 React 应用的结构和状态流，尤其适用于规模和复杂度不断增长的应用。目前支持 React v.16.8。
使用前提
1. 使用 Realize for React 必须安装 React Dev Tools。请从 Chrome 商店安装。
2. Realize 最适合用于未部署的应用。已部署网站的代码混淆会使组件结构难以阅读。
使用方法
1. 点击蓝色的“添加至 Chrome”按钮。
2. 安装完成后，打开您的 React 网站。
3. 打开开发者工具窗口，点击 Realize 面板。
4. 触发状态变化以显示组件树。
功能：
- 使用搜索栏搜索树中的任意组件。
- 点击组件节点，右侧面板将显示有关状态、子组件、props 和 hooks 的信息。
- 按住 shift 并拖动或滚动，可缩放和平移组件树。
- 点击“State”按钮，查看状态在组件树中的流动。