Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteTo profile Angular in Chrome, use a development build, enable Angular’s profiling integration with ng.enableProfiling(), then record the slow page load or interaction in Chrome DevTools’ Performance panel. The Angular track adds framework events to the browser timeline, helping you compare Angular execution with other scripts and browser rendering. For a closer look at change-detection cycles and component timings, use the Angular DevTools Profiler.
Before you record: use a development build
Angular’s profiling integration depends on development-mode debug features. Production optimizations remove features Angular DevTools needs to connect to the app, and enableProfiling() is a no-op in production mode. Angular documents that ng serve disables optimizations by default. If you need to debug a deployed app, Angular’s overview describes setting the build’s optimization option to false; treat that as a debugging configuration, not a production-performance measurement. See Angular DevTools Overview and the enableProfiling API.
Capture the slow workload in Chrome
- Enable Angular profiling. In Chrome DevTools’ Console, run
ng.enableProfiling(). Alternatively, importenableProfiling()from@angular/coreand call it in your application startup code. To include startup activity in the profile, call it before bootstrapping the app. The Angular Chrome DevTools profiling guide documents both approaches. - Open the Performance panel. Start a recording, reproduce the particular slow load or interaction, and stop the recording. Capture a repeatable workload that represents the problem rather than unrelated browsing or idle time.
- Inspect the Angular track alongside the browser timeline. Find the interval that corresponds to the delay and compare Angular events with browser activity. Angular’s track includes framework concepts such as components, change detection, and lifecycle hooks, with lower-level call information. Its color-coded categories distinguish developer TypeScript, compiler-transformed template code, and application entry points or reasons for execution.
- Follow the evidence to the relevant code. Inspect the event details and calls associated with the slow interval to identify whether work is in a component, service, lifecycle hook, or change-detection activity. A selected Angular event may offer a component link to Angular DevTools. Opening that link requires the Angular DevTools extension and Chrome’s experimental flag at
chrome://flags/#enable-devtools-deep-link-via-extensibility-api.
Choose the view that matches the question
Chrome’s Performance panel and Angular DevTools’ Profiler answer related but different questions. Chrome is useful when you need Angular activity in the context of the full browser timeline; the Angular Profiler is more focused on change detection and the component hierarchy.
| View | Best for | What it shows |
|---|---|---|
| Chrome DevTools Performance panel | Finding where Angular work sits relative to other scripts and browser rendering. | Browser performance data alongside Angular framework events and lower-level call information. |
| Angular DevTools Profiler | Inspecting change-detection cycles and the components or directives involved. | Each bar represents a cycle; selecting one exposes component timings and a flame-graph-like view of work through the rendered hierarchy. Recordings can be saved as JSON and imported later. See Profile your application. |
Use the Performance panel first when the cause could be Angular, another script, layout, or paint. Move to the Angular Profiler when the evidence points to change detection and you need per-cycle component detail.
#1 Best Overall
Read the profile without over-interpreting it
- Browser activity without Angular-track events: If the slow interval contains browser work but no Angular-track activity, investigate rendering or another script as possible causes. This is a clue, not proof that Angular is uninvolved.
- A taller Profiler bar: It indicates more time spent in that change-detection cycle. Select the bar to see participating components and directives and their timings.
- Time concentrated in the flame graph: Compare components within the same selected cycle to see where execution is concentrated in the render hierarchy.
- Several synchronization passes in one cycle: These can indicate that state is being updated during change detection. Angular warns this can slow page updates and, in the worst case, contribute to an infinite loop.
- Components that did not run change detection: The Profiler’s view can highlight components that ran and gray out those that did not, including some
OnPushcomponents that were not re-rendered.
Investigate a slow component before changing architecture
Angular evaluates template expressions and runs lifecycle hooks during change detection. A slow synchronous computation can delay the overall cycle, so begin with the component timing and the calls it points to.
Check template expressions and lifecycle hooks
Look for costly work in template expressions and hooks that run synchronously during change detection. Angular specifically identifies ngDoCheck, ngAfterContentChecked, ngAfterViewChecked, and ngOnChanges in its guide to slow computations. Optimize the measured hotspot rather than assuming a hook or component is slow based on its name alone.
Match the remedy to the measured bottleneck
For runtime responsiveness, Angular’s performance overview lists zoneless change detection, skipping subtrees with OnPush, fixing slow computations, and reducing zone pollution as approaches to consider when profiling indicates unnecessary work. For slow initial loading, it lists lazy routes, @defer, image optimization, and server-side rendering. These are options, not interchangeable fixes: choose one that addresses the work the recording actually shows, then capture a comparable profile after the change.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
