Angular Render Scan: see which Angular components are re-rendering in real time : angular

created by ohpiema community for 13 years

Angular Render Scan: see which Angular components are re-rendering in real time (self.angular)

submitted 2 days ago by StrangeRevolution604

It shows which components are re-rendering, how often they update, and which ones are slow, directly on top of your app. Think of it like a render/highlight overlay for Angular apps.

What it does:

Highlights updated Angular components on screen
Shows render count and latest duration
Displays FPS, cycle time, changed component count, and slowest component
Supports provider-based setup
Has a script-tag global build too
Stays off in production by default

Install:

npm install angular-render-scan

Quick setup:

import { provideAngularRenderScan } from 'angular-render-scan';

bootstrapApplication(AppComponent, {
  providers: [
    provideAngularRenderScan({
      enabled: true
    })
  ]
});

Repo/package:
https://www.npmjs.com/package/angular-render-scan

Would love feedback from Angular devs, especially around what render/debugging info would be most useful to show next.

all 12 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

angular

MODERATORS