Angular › Angular DevTools & Debugging

How do you use the Profiler tab in Angular DevTools to find slow components?

Intermediate

Answer

The Profiler tab lets you record a session while interacting with your app, then shows a visual chart of exactly how long each component took during every change detection cycle, making it easy to spot which specific component is taking longer than expected to update.

// No code needed, this is done entirely inside the browser DevTools panel
// 1. Click the Profiler tab
// 2. Click record, interact with your app, then stop recording
// 3. Review which components took the longest during each cycle

Real-world example A team notices their app feels sluggish while typing in a search box, and using the Profiler, discovers that a large, unrelated data table was being checked on every keystroke, which they fix by adjusting its change detection strategy.

Common follow-ups: What does a very tall bar in the Profiler's chart usually indicate?;How do you compare two separate profiling recordings to check if a fix actually helped?

Change Detection;Performance & Lazy Loading