How to display Angular9 change detection process in browser?

i wanted to do the same but there is no lifecycle hook which can do that, so i did a hack, may be that will help you as well.

on any tag in the html template invoke a function and log on console when the function is executed. Whenever the change detection will be executed, the template will get re-evaluated resulting in the function invocation. That worked pretty well for me to analyze what's going

.html
<div>{{doNothing()}}</div>

.ts
doNothing() {
  console.log('template evaluated');
}

If you have a ngFor in your template you can add trackBy. This will get called every time change detection triggers (https://angular.io/api/common/NgForOf#change-propagation) and you can log out a statement. You can then set a breakpoint on the function and look at stack trace to see where change events are originating.

I stumbled across this method while trying to debug an issue that would crash the browser due to change detection getting constantly triggered.

template

<div *ngFor="let things of things; trackBy: trackThings"></div>

component

trackThings(index, thing) {
 console.log(index, question)
 return thing ? index : undefined;
}

Track by also improves performance: https://medium.com/@ramy_ali/improving-angular-ngfor-performance-through-trackby-ae4cf943b878

The Angular DevTools for Chrome provide a profiler that lists all change detection events, shows the source for each event and also allows you to see which component has been checked during each CD cycle. Just make sure to select the "flame graph" and tick the "Show only change detection" checkbox. The components marked blue have been checked.