Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of DevTools in Angular. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

The Angular team announced the launch of Angular DevTools, an Chrome DevTools extension that can be used to help examine the structure of applications and analyze their performance.

A recent survey of Angular developers by Angular found that most people need better tools to debug their applications. The areas that need most attention include the improvement of error messages, understanding the implementation of change detection, understanding the injector hierarchy and provider instantiation, and the visualization of component structures.

As part of a project to improve the debugging experience, the development team has introduced a new API for global ng objects. It also works to improve the error messages of Angular, providing more information and actionable guidance on how to solve these problems. To give developers a better understanding of how to configure an application, it also provides information about using Chrome DevTools for performance analysis.

Angular said that in order to solve the remaining problems and provide a dedicated view of Angular based on Chrome DevTools functionality, the team developed Angular DevTools in cooperation with Rangle.io. The Rangle team built the first debugging tool for Angular, Augury, which has served the community for many years. In this partnership, the two sides reused the lessons learned from Augury and developed Angular DevTools from scratch.

In the current version, Angular DevTools focuses on the visualization of component structure and understanding the implementation of change detection. Similar to Augury, Angular DevTools provides a component browser that allows users to preview the structure of the application.

It also provides an overview of the change detection cycle to help developers identify performance bottlenecks so that they can provide users with the 60fps experience.

Angular DevTools supports Ivy-enabled applications built with Angular v9 and above. Officials say Angular DevTools provides important missing parts to help users better understand the structure and runtime performance of the application. In future versions of Angular DevTools, the team will work to fill the gaps in the functionality of Augury and consider adding the most influential features according to user requirements.

For more information, please see the official announcement: https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f

This is the end of this article on "sample Analysis of DevTools in Angular". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.