Angular中DevTools的示例分析

这篇文章将为大家详细讲解有关Angular中DevTools的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

Angular 团队宣布推出 Angular DevTools，一个 Chrome DevTools 扩展，可以用来帮助检查应用程序的结构并分析其性能。

日前，Angular 曾针对 Angular 开发者进行了一项调查发现，大多数人都需要更好的工具来调试其应用程序。其确定了最需要关注的领域包括有：错误信息的改进、理解变化检测的执行、理解注入器层次结构和 provider 实例化，以及组件结构的可视化。

作为改善调试体验项目的一部分，开发团队已经为全局ng对象引入了新的 API。并致力于改善 Angular 的错误信息，提供了更多关于如何解决这些问题的信息和可操作的指导。为了让开发者更好地了解如何配置应用程序，其还提供了有关使用 Chrome DevTools 进行性能分析的内容。

Angular 方面称，为了解决其余的问题，并提供一个基于 Chrome DevTools 功能的 Angular 专用视图，该团队与 Rangle.io 合作开发了 Angular DevTools。Rangle 团队曾为 Angular 构建了第一个调试工具 Augury，该工具已经为社区服务了多年。在此次合作中，双方重用了从 Augury 获得的经验教训，从头开始开发了 Angular DevTools。

在当前版本中，Angular DevTools 专注于组件结构的可视化、以及理解变化检测的执行。与 Augury 相似，Angular DevTools 提供了一个组件浏览器，可让用户预览应用程序的结构。

它还提供了一个变化检测周期的概述，帮助开发人员找到性能瓶颈，从而可以为用户提供 60fps 的体验。

Angular DevTools 支持用 Angular v9 及以上版本构建的、启用了 Ivy 的应用程序。官方表示，Angular DevTools 提供了重要的缺失部分，可帮助用户更好地了解应用程序的结构和运行时性能。在 Angular DevTools 的未来版本中，团队将致力于填补 Augury 的功能空白，并根据用户的要求考虑添加最具影响力的功能。

详情可查看官方公告：https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f

关于"Angular中DevTools的示例分析"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。