{"id":2314,"date":"2025-06-03T15:52:01","date_gmt":"2025-06-03T22:52:01","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2314"},"modified":"2025-06-03T15:52:03","modified_gmt":"2025-06-03T22:52:03","slug":"angular-profiling-in-chromes-performance-dev-tools","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-profiling-in-chromes-performance-dev-tools\/","title":{"rendered":"Angular Profiling in Chrome’s Performance Dev Tools"},"content":{"rendered":"\n

Angular 20 introduced a new custom track in Google Chrome for extended information about events, change detection cycles, bindings, and more.<\/p>\n\n\n\n

Here is what the track looks like – it can get toggled open or closed:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

In the example above, we can see that a browser interaction triggered change detection in the AppComponent, which is pretty typical in a Zone.js-based Angular application<\/a>.<\/p>\n\n\n\n

The main benefit of the new track is that it ties together Angular-related information with regular browser information, such as memory usage and CPU usage, unlike the regular Angular DevTools extension<\/a>, which gives Angular-specific information only.<\/p>\n\n\n\n

To use the new track, ensure your project runs on Angular 20 in development mode. Then, open the browser developer tools, click on the “Performance” tab, and click the “Record” button (similar to the Angular DevTools profiler<\/a>). Then, interact with the application and click “pause” when you want to stop the profiler and analyze the performance recording.<\/p>\n\n\n\n

You can zoom in or out to focus on specific events of the recording and get detailed information about what happened at these different moments. This tool is perfect to detect useless change detection cycles that could be optimized by using the OnPush change detection strategy<\/a>, for instance.<\/p>\n\n\n\n

If you’re looking for more performance-related advice, my course “Angular Performance Optimization techniques<\/a>” on LinkedIn Learning might be precisely what you’re looking for.<\/p>\n","protected":false},"excerpt":{"rendered":"

Angular 20 introduced a new custom track in Google Chrome for extended information about events, change detection cycles, bindings, and more. Here is what the track looks like – it can get toggled open or closed: In the example above, we can see that a browser interaction triggered change detection in the AppComponent, which is […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,13,20],"tags":[],"class_list":["post-2314","post","type-post","status-publish","format-standard","hentry","category-angular","category-debugging","category-performance"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t