Debugging angular 2 performance

Question

I've notice that my angular 2 app is becoming a bit sluggish. For example, the time between clicking on a button (which sets some state) and having the result displayed (based on that state value) has some (~1 sec) delay. I suspect that there are some performance issues in some of the methods that are called during each change detection loop.

Can anyone provide guidance on:

1) How to time how long each change detection loop takes?

2) How to pinpoint those method calls that are significantly contributing to the delay?

Thanks.

Answer 1

Within Developer tools in chrome, under "Profiles" panel, you can run the profiling type Record JavaScript CPU Profile, which will record the execution time of functions, and that should help you detect which functions contribute the most to the delay of your app.

UPDATE

This feature is now found in the "Performance" panel since Chrome 58. Open the "Performance" panel and click the "Record" icon to start profiling the page.

There are other types of profile types within that tab that should help you too. Here's a link to help analyze the Chrome profile generated when you stop recording. A similar functionality also exists in Internet Explorer.