⬇ 关注公众号免费获取解压码!!

需要AI工具?点击访问AI工具箱

二维码

插件下载地址 ↓

点击下载插件

插件介绍

在反应应用中进行时间旅行调试和性能监控的镀铬扩展。Reactime被提名为2020年React开源奖的生产力促进奖。Reactime是一种用于时间旅行调试和React应用程序性能监视的开源Chrome开发人员工具。 Reactime使开发人员能够记录应用程序状态的快照,在状态快照之间跳跃和检查,并监视性能指标,例如组件渲染时间和渲染频率。特征:- 记录应用程序状态和可访问性树的快照- usecontext挂钩的提供商/消费面板- 状态的导入和导出快照- 时间旅行调试- 快照系列比较- 组件树可视化- 反应路由器兼容性- 组件渲染时间和频率- 支持Gatsby,Next.js和Remix- 打字稿支持- 重新连接的能力- 网络性能指标- 教程演练- 撑杆可视化- 直观的布局和现代设计- 黑暗模式什么是新的!Reactime 26.0引入了重新定义React调试的变换更新。开创性的提供商/消费者面板现在捕获并可视化与usecontext挂钩的状态变化,从而提供了提供者 – 消费者关系和实时上下文状态价值观的实时视图。经过改进的时间旅行滑块通过直观的导航和播放选项可以增强对调试的控制。该扩展名还拥有一个现代化的UI,具有黑暗模式,可更好地可用性,通过关键错误修复来提高可靠性,并恢复可访问性树选项卡,以解决潜在的可访问性问题。有了这些创新,Reactime V26使开发人员能够简化工作流程并优化以前从未像现在这样的复杂状态流动。故障排除:❓为什么Reactime不记录新状态变化?Reactime失去了与您要监视的标签的连接,只需单击“重新连接”按钮即可恢复您的工作。❓为什么反应不找到我的钩子?Reactime通过在开发模式下遍历应用程序未启动的反应代码来检测和监视钩子。如果您的构建过程正在缩小或丑化您的代码(即使是用于开发构建),则可能无法正确找到和跟踪您的挂钩。要解决这个问题:确保真正的开发构建:双重检查捆绑器或构建工具配置(例如,WebPack,Babel,Vite等),以确保您的应用程序在开发模式下不会被最小化或丑化。例如,使用WebPack,请确保您处于模式:“开发”,该操作应禁用默认缩放。在创建React App项目中,简单地运行NPM启动或YARN启动将自动配置非限制的开发构建。检查替代:确保没有自定义的Babel或Webpack插件来缩小您的代码,尤其是在使用Next.js或Gatsby之类的框架时。有时,其他插件或脚本可能会在引擎盖下运行。重新启动和重建:更改任何构建配置后,重建或重新启动开发服务器,以确保应用新的配置。然后刷新您的浏览器选项卡,以便Reactime可以检测到未启动的钩子。更改任何构建配置后,重建或重新启动开发服务器,以确保应用新的配置。然后刷新您的浏览器选项卡,以便Reactime可以检测到未启动的钩子。❓为什么Reactime告诉我找不到React应用程序?Reactime最初使用Chrome API的Dev Tools Global挂钩运行。 Chrome加载它需要时间。尝试刷新应用程序几次,直到您看到Reactime运行。❓为什么我需要启用React Dev工具?Reactime与React Developer工具同时起作用,以访问React应用程序的光纤树;在引擎盖下,Reactime通过React开发人员工具的全局挂钩遍历光纤树,从而将显示给开发人员显示所需的所有相关信息❓我在Reactime中找到了一个错误Reactime是一个开源项目,我们很想听听您有关改善用户体验的信息。请阅读👩‍💻开发人员读数,并创建一个拉动请求(或问题),以提出和协作Reactime的更改。

插件截图

插件截图
插件截图
插件截图
插件截图
插件截图

原文链接:https://www.scs66.com

本站资源均源自网络,个人下载后如进行违法行为均与本站无关,请根据需求下载。本链接来自第三方,本站不存储资源,24小时内请删除

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。