Reactime Chrome插件v5.0.0官方版

reach chrome插件是React开发人员的调试工具。它以“快照”的形式记录应用程序状态的变化，并允许用户跳转到任何以前记录的状态。

插件介绍

Chrome扩展，通过在每次渲染过程中记忆组件的状态来帮助调试React应用程序。

Reactime被提名为2020 React开源奖的生产力促进奖！

Reactime是一个针对React开发者的调试工具。它将应用程序的状态变化记录为“快照”，并允许用户跳转到任何以前记录的状态。

该工具适用于使用有状态组件和道具进行钻取的React应用程序。测试版支持反冲、上下文API、条件状态路由、钩子(useState、use Effect)和功能组件。

版本6通过新的可视化增强了用户体验，更好地培养了目标应用程序中的状态数据和组件关系，并修复了各种错误。现在，您可以单击历史选项卡中的任何节点来完成时间跳转。历史和地图选项卡现在有一个动态图例，这使得可视化更具表现力和意义。地图选项卡中的核心可视化工具已被替换，现在提供了各种方向、布局和节点链接。“性能”选项卡现在以堆叠条形图的形式显示快照，当状态改变时，为用户提供组件渲染时间的鸟瞰图。最新版本在可视化中增加了新的onHover功能，用户可以将组件的表示形式(如地图标签中的节点或性能标签中的条形图)悬停，它们对应的HTML元素将在DOM中高亮显示。

安装方法

从Chrome在线商店安装reach扩展。或者，使用src/extension/build/build.zip在开发人员模式下手动安装。如果您在本地测试，请在扩展的详细信息页面中打开“允许访问文件网址”。

v3和以前用户的关注。不再需要NPM一揽子计划。

然后打开Chrome开发工具，导航到到达选项卡。

功能介绍

录音

每当状态改变时(每当调用setState或useState时)，扩展将创建当前状态树的快照并记录它。每个快照都将显示在Chrome开发工具的延伸面板下。

查看状态

您可以单击快照查看应用程序的状态。状态可以用JSON格式或层次树可视化。此外，快照可以与以前的快照进行比较，并在“差异”选项卡下查看。

查看应用程序

您可以在“地图”选项卡中查看目标应用程序的整个组件层次结构。

跳跃

时间旅行允许您跳转到任何以前记录的快照。单击任意快照上的跳转按钮或单击历史选项卡中的任意节点将通过设置它们的状态来更改DOM。

绩效指标

新的性能选项卡显示堆叠快照条形图，以帮助用户可视化和识别组件渲染时间的潜在趋势或瓶颈。每个条形图都有一个用于显示更多信息和DOM突出显示的现有工具提示。

附加功能。

-反冲数据流的可视化

-组件地图可视化

-描绘状态变化的多个树枝。

-树形视图悬停功能，查看状态变化。

-平移和缩放树形图的能力

-支持多个标签

-快速移动快照的滑块。

-自动浏览快照的播放按钮。

-暂停按钮，停止记录每个快照。

-当扩展被锁定时，setState将失去其功能。

-刷新时保留快照的持久按钮(便于代码修改和调试)。

-导出/导入当前内存中的快照。

-动作面板中的声明性标题。

-对具有条件状态字段的组件的扩展支持。