游戏介绍

Reactime插件是一款专为React开发者设计的Chrome扩展工具，在帮助开发者更高效地调试React应用程序。Reactime插件提供了组件树的可视化功能，使开发者能够清晰地看到应用程序的组件层次结构。这有助于理解组件之间的关系和状态传递。

软件教程

安装说明

1、在打开的谷歌浏览器的扩展管理器

就是点击最左侧的三个点，在弹出的菜单中选择【更多工具】——【扩展程序】

或者你可以在地址栏中直接输入chrome://extensions/

2、进入扩展程序页面后将开发者模式打勾

3、最后将解压出来的crx文件拖入到浏览器中即可安装添加

4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装

5、安装好后即可使用

常见问题

注意事项

更新时间：2024/12/19

兼容性：请确保插件与您的Chrome浏览器版本兼容，以免出现无法正常使用的情况。

安全性：下载插件时请选择可信的来源，以避免下载到恶意软件或病毒。

更新与维护：插件可能会定期更新以修复bug或添加新功能，请用户及时关注并更新到最新版本。

软件功能

录音

每当状态发生变化时(每当调用setState或useState时)，该扩展将创建当前状态树的快照并将其记录下来。每个快照都将显示在 Chrome DevTools 的 Reactime 面板下。

查看状态

您可以点击快照来查看您的应用程序的状态。状态可以以JSON格式或层次树的形式可视化。此外，快照可以与之前的快照进行对比，可以在差异标签下查看。

查看应用程序

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

跳跃

时间旅行允许你跳转到任何以前记录的快照。点击任何快照上的跳转按钮或点击历史标签中的任何节点都会通过设置他们的状态来改变DOM。

绩效指标

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

附加功能。

-后坐力数据流可视化

-组成部分地图可视化

-描绘状态变化的多个树状图分支。

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

-能够平移和缩放树形图

-支持多个标签

-一个快速移动快照的滑块。

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

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

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

-在刷新时保留快照的持续按钮(在修改代码和调试时很方便)。

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

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

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

软件特色

一个Chrome扩展，通过记忆每次渲染时组件的状态来帮助调试React应用。

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

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

该工具适用于使用有状态组件和道具钻井的React应用，测试版支持Recoil、Context API、条件状态路由、Hooks(useState、use Effect)和功能组件。

第6版通过新的可视化增强了用户体验，更好地将目标应用程序中的状态数据和组件关系上下文化，同时修复了各种bug。现在可以在历史标签中通过点击任何节点来完成时间跳转。历史和地图选项卡现在都有一个动态图例，使可视化更有表现力和意义。地图选项卡中的核心可视化器已被替换，现在提供了各种方向、布局和节点链接。性能选项卡现在以堆叠条形图的形式显示快照，为用户提供状态变化时组件渲染时间的鸟瞰图。最新的版本在可视化中加入了新的onHover功能，用户可以将组件的表现形式(如地图标签中的节点或性能标签中的条形图)悬停，其对应的HTML元素将在DOM中突出显示。

更新日志

更新时间：2024/12/19

修复已知bug