Share Knowledge

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:


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';

  .bootstrapModule(AppModule).then(moduleRef => {
    const applicationRef = moduleRef.injector.get(ApplicationRef);
    const componentRef = applicationRef.components[0];
  .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?

You ·

Do we need to check for environment.production for using this code? So it won't cause problems in production?

Tom Eustace ·


yes, the code is intended for debugging purposes not for production. So environment file should be imported and only enable if production is false.