Enable Angular debug tools to help with profiling your application
Friday, December 11, 2020
Enable Angular debug tools to help with profiling your application
Angular has some powerful utilities to help developers debug and profile their applications.
To enable them you can add the following to your applications main.ts file.
You can then access the AngularProfiler via console:
ng.profiler
You can now profile change detection from the console:
ng.profiler.timeChangeDetection({record: true})
Once you have run the above command switch to the Javascript Profiler tab where you will find a Change Detection CPU profile has been created.
The profiler will tell you how many change detection cycles ran and how long it took.
Code Examples
Enable Angular debug tools
import { ApplicationRef, enableProdMode } from '@angular/core';
import { enableDebugTools } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic()
.bootstrapModule(AppModule).then(moduleRef => {
const applicationRef = moduleRef.injector.get(ApplicationRef);
const componentRef = applicationRef.components[0];
enableDebugTools(componentRef);
})
.catch(err => console.error(err));
Have a question or comment?
Do we need to check for environment.production for using this code? So it won't cause problems in production?
Hi,
yes, the code is intended for debugging purposes not for production. So environment file should be imported and only enable if production is false.