10

Enable Angular debug tools to help with profiling your application

Friday, December 11, 2020

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));
Tom Eustace

Reformed Java developer specializing in frontend technologies, mostly Angular (Nx), Svelte, Vue and D3.

Have a question or comment?