LOADING

Reactime

Reactime15.0.0

一个 Chrome 扩展,通过记住每次渲染的组件状态来帮助调试 React 应用程序。 Reactime 被提名为 2020 年 React 开源奖的生产力助推器奖。 Reactime 是一个开源的 Chrome 开发者工具,用于在 React 应用程序中进行时间旅行调试和性能监控。 Reactime 使开发人员

官方版无广告31

更新日期:2021年 8月 29日分类标签:语言:中文平台:

2.11MB 0 人已下载 手机查看

简介:
一个 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

相关资源

XDown
Internet Downloader enables you to download a desired item with an Internet Download Manager (xdown) application.1:通过插件获取下载地址传递给下载程序2:帮助用户在网络不好的情况下断点续传文件3:通过
Code Cleaner
Code Cleaner 可以清除代码中的冗余信息,得到简洁可复用的DOM结构。Code Cleaner helps web developers get clear DOM code, when some module on page can be used again, you can use the 'El
Console Importer
使用一条命令从控制台导入 JavaScript 和 CSS 资源开发者从Chrome控制台轻松导入JS和CSS资源的工具源代码: https://github.com/pd4d10/console-importer
Lorem Ipsum Generator
快速生成 Lorem Ipsum 占位符文本。选择所需的长度并在段落、单词、字节或列表之间进行选择。设计优雅且易于使用。您输入的值将被存储,以便您的首选选项将始终立即可用。
Odoo Terminal
类终端发送json-rpc请求和Odoo开发者使用工具以非常简单的方式使用 Odoo json-rpc 的所有功能! Odoo 终端: - 查看记录- 搜索、创建、删除记录- 调用模型方法- 启动动作- 运行发布请求- 以及更多!源代码:https://github.com/Tardo/OdooTerminal此
RunMyCode Online
RunMyCode Online 是一个免费的开源工具,可以直接从 Github、Gitlab 和 Bitbucket 在线编译和运行代码。如何使用: 1. 安装扩展。 2. 安装扩展程序时,[RunMyCode Online](https://runmycode.online) 将在新选项卡中打开并提示您进行身

暂无评论

暂无评论...