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.
Written by me; structure and editing polished with Claude.
Top comments (0)