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的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。