简介:

一个 Chrome 扩展，通过记住每次渲染的组件状态来帮助调试 React 应用程序。
Reactime 被提名为 2020 年 React 开源奖的生产力助推器奖。

Reactime 是一个开源的 Chrome 开发者工具，用于在 React 应用程序中进行时间旅行调试和性能监控。 Reactime 使开发人员能够记录应用程序状态的快照、在状态快照之间跳转和检查状态快照，以及监控组件渲染时间和渲染频率等性能指标。

Reactime 支持使用有状态组件和 Hooks 的 React 应用程序（现在包括 React Router 应用程序），测试版支持 Recoil 和 Context API 以及 Gatsby 和 Next.js 等框架。

Reactime 15.0 添加了一个新的可视化，允许用户在特定快照的各个组件上进行分区。此外，还实施了许多错误修复。

目前，Reactime 支持使用有状态组件和 Hooks 的 React 应用程序（现在包括 React Router 应用程序），测试版支持 Recoil 和 Context API 以及 Gatsby 和 Next.js 等框架。

此前，Reactime 14.0 添加了以下令人兴奋的功能：

反应路由器兼容性
Reactime 现在与 React Router 应用程序兼容！在 Reactime 14.0 之前，可以在用户浏览各种路线时记录状态快照，但只能对当前路线进行时间旅行调试（即无法跳回到不同路线的先前状态）。为了简化具有多个路由的应用程序的调试，Reactime 14.0 添加了允许用户回到不同路由的功能，包括在浏览器中实时更新以反映他们的应用程序在先前访问的路由上的状态。

按路线分类状态快照
Reactime 仪表板中的状态快照列表现在按路由分类，为开发人员提供快照-路由关系的视觉提示，并使各种路由的时间旅行调试更容易。

按路由过滤性能指标
Reactime 仪表板包括一个堆叠条形图，显示每个组件的渲染时间，每个快照都有一个单独的条形图。在 Reactime 14.0 中，现在可以按路线过滤此复合条形图，以允许开发人员按路线查看详细的性能数据。

特征：

• 组件树可视化
• 记录应用状态快照
• 时间旅行调试
• 快照系列比较
• 组件渲染时间和频率
• 支持 Gatsby 和 Next.js
• 对 TypeScript 的 Beta 支持
• 教程演练

故障排除：

为什么 Reactime 告诉我没有找到 React 应用程序？
Reactime 最初使用来自 Chrome API 的开发工具全局钩子运行。 Chrome 需要时间来加载它。尝试刷新您的应用程序几次，直到您看到 Reactime 正在运行。

出现黑屏而不是 Reactime 扩展。
尝试刷新您要测试的应用程序，并通过单击鼠标右键"重新加载框架"来刷新 DevTools。

我在 Reactime 中发现了一个错误。
Reactime 是一个开源项目，我们非常感谢您帮助改善用户体验。请创建拉取请求（或问题）以提议和协作对存储库进行更改。

延伸阅读：

https://medium.com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20
https://medium.com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8
https://medium.com/@yujinkay/meet-reactime-a-time-traveling-state-debugger-for-react-24f0fce96802
https://itnext.io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb
https://rxlina.medium.com/time-traveling-through-react-state-with-reactime-9-0-371dbdc99319
https://medium.com/@liuedar/what-time-is-it-reactime-fd7267b9eb89
https://medium.com/@christinaor/uncovering-reactime-understanding-react-fiber-redux-compatibility-and-zoning-in-on-components-59f0758e0fa3

插件下载: