Enable Angular Profiler

2018-09-28  本文已影响0人  forks1990

Change bootstrap code in your main.ts file:

platformBrowserDynamic().bootstrapModule(AppModule).then(
  module => {
    // Enable profile tools in development mode, run:
    //
    //   ng.profiler.timeChangeDetection()
    //
    // In browser develop tools console.
    if (!environment.production) {
      let applicationRef = module.injector.get(ApplicationRef);
      let appComponent = applicationRef.components[0];
      enableDebugTools(appComponent);
    }
  }
).catch(err => console.log(err));

Open browser developer tools run: ng.profiler.timeChangeDetection(), you'll get something like:

> ng.profiler.timeChangeDetection()
platform-browser.js:2201 ran 4308 change detection cycles
platform-browser.js:2202 0.12 ms per check
ChangeDetectionPerfRecord {msPerTick: 0.11606313834726091, numTicks: 4308}

Helpful to find out angular change detection performance, combine with browser javascript profiler to find out which component is too slow.

上一篇下一篇

猜你喜欢

热点阅读