Reactime Chrome插件

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

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

插件介绍

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

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

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

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

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

安装方法

　　从 Chrome 网络商店安装 Reactime 扩展。或者，使用 src/extension/build/build.zip 在开发者模式下进行手动安装。如果在本地测试，请在扩展详情页面中打开 "允许访问文件 URL"。

　　v3及以前的用户注意。不再需要NPM包。

　　然后打开Chrome DevTools并导航到Reactime标签。

功能介绍

　　录音

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

　　查看状态

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

　　查看应用程序

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

　　跳跃

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

　　绩效指标

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

　　附加功能。

　　-后坐力数据流可视化

　　-组成部分地图可视化

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

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

　　-能够平移和缩放树形图

　　-支持多个标签

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

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

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

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

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

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

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

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