See every wasted re-render in your Angular app

Hussein AbdElaziz — Mon, 06 Jul 2026 13:54:44 +0000

Angular's change detection is powerful, and completely invisible. You can feel a slow app — janky scrolls, laggy inputs — but you can't see which components are re-rendering, how often, or whether any of that work was actually necessary.

React developers have had react-scan for a while: flip it on, and re-renders light up on the screen. Angular had no equivalent.

So I built one.

What angular-scan does

angular-scan hooks into Angular's dev-mode profiler and paints re-renders directly onto your running app:

Yellow flash — the component was checked and the DOM actually changed. A real render.
Red flash — the component was checked but the DOM did not change. A wasted render.
Counter badges — a cumulative render count pinned to each component's host element.
A floating HUD — total checks, wasted renders, runtime toggles, and a per-component inspector you can drill into.

One line in app.config.ts and you're scanning. It works with both zone.js and zoneless apps, and it's tree-shaken out of production entirely when isDevMode() returns false — zero overhead in your shipped bundle.

But the library has a hard limit

The library is great — for apps you own. Even with the imperative scan() API for micro-frontends where you can't touch the providers, it still has to be installed in the project and present in the build. It needs to ship with your code.

But a lot of the time, that's exactly what you don't have. You want to inspect a deployed dev build you didn't write, audit a third-party Angular app, or just take a quick look at your own project without adding a dependency and restarting the dev server.

The library can't reach any of those. So I built something that can.

The angular-scan Chrome extension

The extension brings the same overlay to any Angular app running in dev mode — no npm install, no provider, no restart. It auto-detects Angular (the toolbar badge tells you exactly what it found: dev build, production build, or no Angular at all), it's off by default and enabled per site, and it adds three things the library can't:

1. Exportable reports. A per-component table with renders, wasted renders, and renders-per-second (current and peak), sortable by any column — exportable as JSON or CSV, plus a full-page report viewer with summary cards and a "busiest components" chart. Drop it in a performance audit, or share a snapshot with your team.

2. Source location resolution. It reads the source location the Angular compiler embeds in dev builds, and falls back to scanning your bundles' source maps when that's stripped (looking at you, webpack/Nx setups) — so you see AppHeaderComponent — src/app/header/header.component.ts:12, not just a class name. This alone turns "something's re-rendering a lot" into "this line is re-rendering a lot." Clicking a row even flashes the component on the page.

3. DOM seeding on enable. The component table is populated the moment you turn it on, instead of staying empty until you happen to trigger renders.

Library or extension — which one?

Both do the same core thing. The difference is access:

	Library	Extension
Setup	One line in `app.config.ts` (or `scan()` for MFEs)	Install, enable on the site, done
Present in your build	Yes	No
Best for	Apps you own; team-wide dev; CI/programmatic use	Third-party apps, deployed dev builds, quick audits
Reports (JSON/CSV)	—	Yes
Source file:line resolution	—	Yes

Rule of thumb: your app → library, someone else's app → extension.

Both require Angular 20 or newer (tested on 20, 21, and 22) running in development mode — production builds strip the profiler hooks by design.

Try it

If it helps you catch one wasted render that was quietly tanking your frame rate, it did its job.

Live demo: https://husseinabdelaziz.github.io/angular-scan
npm: https://www.npmjs.com/package/angular-scan
Chrome Web Store: https://chromewebstore.google.com/detail/angular-scan/bgdecfngmafoiopdckbffadnjcfmcdli
GitHub: https://github.com/husseinAbdElaziz/angular-scan
Deep dive — library: https://hussein.ee/blog/angular-scan
Deep dive — extension: https://hussein.ee/blog/angular-scan-extension

If you give it a spin, I'd love to hear what wasted renders you find. A star ⭐ on GitHub keeps the project going.