React SightReact 组件层次可视化工具

React Sight 是 React 应用的组件层次树的实时视图，以 Chrome 插件形式发布，支持 React Router 和 Redux，现在支持Firefox。

设置 | 从 Chrome 商店安装

1. 确保您已将React Dev Tools添加到 Chrome。
2. 从 Chrome 网上商店安装React Sight
3. 如果您正在运行本地文件 URL，请确保在 React Dev Tools 和 React Sight 的扩展设置中启用“允许访问文件 URL”
4. 运行你的 React 应用程序，或者打开任何运行 React 的网站！
5. 打开 Chrome 开发者工具 (cmd+opt+j) -> React Sight 面板

用法

将鼠标悬停在节点上，在侧面板中查看它们的状态和道具。

使用内置过滤器隐藏 DOM 元素、Redux 组件和路由器组件，可以只关注自己编写的组件

通过双击放大，通过 shift + 双击缩小（鼠标滚轮缩放即将推出！）