Google has introduced Angular DevTools, a new Chrome DevTools extension designed to help developers inspect and optimize applications built with the Angular framework. Created in collaboration with Rangle.io, the tool was officially launched on May 18. Angular DevTools provides a powerful set of features aimed at improving both the performance and structure of Angular applications. Available for download from the Chrome Web Store, it is an essential tool for any developer working with Angular who wants to enhance their workflow and app performance.
One of the key highlights of Angular DevTools is its focus on visualizing the component structure of Angular applications. The tool enables developers to explore the components of an app in a structured way, offering insights into how the application is built. Additionally, Angular DevTools provides a detailed view of the change detection execution process, which plays a critical role in Angular’s performance. By understanding how and when components are updated, developers can identify potential bottlenecks and optimize the overall app experience.
Similar to Rangle.io’s previous tool, Augury, Angular DevTools offers a component explorer and detailed performance analysis. It helps developers identify performance issues by showcasing change detection cycles, detailing what triggered them, and displaying how much time Angular spent on each cycle. The real-time profiling feature allows developers to preview change detection cycles as they occur, making it easier to spot areas where performance improvements can be made. This level of transparency is crucial for developers striving to achieve smooth, 60fps user experiences in their Angular apps.
Currently, Angular DevTools supports applications built with Angular 9 and newer versions. As the tool evolves, future releases are expected to close any functionality gaps, incorporating features from Augury based on user feedback and demand. Angular DevTools joins a suite of other tools in the Angular ecosystem, such as Angular CLI, language services, and Progressive Web App (PWA) support, forming an integral part of the modern Angular development toolchain.