Credit: Dreamstime
Google has published Angular DevTools, a Chrome DevTools extension to inspect the structure and profile performance of applications built with the Angular framework.
Developed in conjunction with tool builder Rangle.io, and introduced May 18, Angular DevTools is focused on visualisation of the component structure and understanding change detection execution. The extension is available in the Chrome Web Store.
Similar to Rangle.io’s Augury debugging tool for Angular, Angular DevTools offers a component explorer to preview application structure and provides an overview of change detection cycles, helping to reveal performance bottlenecks and enable developers to deliver 60fps experiences.
A profiler tab shows individual change detection cycles, what triggered them, and how much time Angular spent in them. Change detection cycles can be previewed in real time.
Angular DevTools supports applications built with Angular 9 and later. Future releases of the extension promise to fill the functionality gap with Augury, factoring in the most impactful features based on requests. Angular DevTools is part of a web development toolchain that also includes Angular CLI, language service, PWA (Progressive Web Apps), and components.
Angular 12 is the current latest version of Google’s popular TypeScript-based web development framework. It was released on May 12.
