The Angular Custom Profiling Track is now available

The Angular and Chrome teams have collaborated to bring Angular-specific data and insights directly into the Chrome DevTools performance panel, creating a unified profiling experience for developers. This integration allows developers to combine the benefits of both tools, offering a more synchronized and comprehensive view of their application's performance. The new custom track for Angular in Chrome DevTools provides performance data using Angular concepts, such as application bootstrap, components, UI synchronization, and lifecycle hooks. The custom track's flame charts group function invocations together under corresponding components and other Angular concepts, allowing developers to drill down to individual functions for a more granular view. The flame chart entries are color-coded to help developers quickly identify what's happening in their application, distinguishing between application code, other scripts, or browser activities. The colors represent different aspects of the application, such as Dependency Injection services, templates compiled by Angular, and entry points. The custom track is interactive, allowing developers to click on an entry in the flame chart to reveal more detailed information about a given entry. To get started, developers need to ensure they are using the latest version of Angular and an up-to-date version of Chrome, run their Angular application in developer mode, and enable the custom track by typing ng.enableProfiling() in the console. This integration demonstrates the ongoing commitment to improving the developer experience within the Angular ecosystem, empowering developers to build faster, more efficient applications.