Angular Monitor

DevTools panel that profiles Angular 17-22: change detection, signals, RxJS, rendering, network and memory.

Angular Monitor is a Chrome DevTools panel that profiles Angular 17–22 apps: change detection, signals, RxJS subscriptions, rendering, network and memory. Local-first and free — all data stays in your browser. WHAT YOU CAN SEE - Change detection cycles and their triggers — Timeline - Signal, computed and effect activity — Signals, Inspector - RxJS subscriptions with their call sites — Observables - User events and the work each one caused — What Just Happened, Timeline - HTTP calls, long tasks, Web Vitals and heap — Network, Rendering, Memory - Loaded package versions — Node Modules HOW TO USE (3 STEPS) 1. Install it Add the companion npm package to your Angular project: npm install @ebdev/angular-monitor (or: pnpm add @ebdev/angular-monitor / yarn add @ebdev/angular-monitor) 2. Add the provider For a standalone app, add it to the providers you pass to bootstrapApplication: import { providePerformanceMonitor } from '@ebdev/angular-monitor'; bootstrapApplication(AppComponent, { providers: [ providePerformanceMonitor(), ], }); Still on NgModule? It is an environment provider, so it goes in the root module's providers array the same way. 3. Keep it out of production The provider is a no-op while the panel is closed, but there is no reason to ship the collectors to users. Wire it behind isDevMode() or your own environment flag: providers: [ ...(isDevMode() ? [providePerformanceMonitor()] : []), ], Then open Chrome DevTools on your running app, switch to the "Angular Monitor" panel and press Start to record. Pass a level option to providePerformanceMonitor() to start recording automatically at bootstrap — useful when the thing you are chasing happens during startup. NOTES - rxjs is a peer dependency and must resolve to the same instance your app uses, otherwise the Observables tab comes up empty. - The Signals tab counts what you tell it about — use the notifySignalWrite / notifyComputed / notifyEffect hooks to attribute activity. - Everything runs locally in DevTools. No data leaves your machine. Docs, demo and full guide: https://angular-monitor.ebdev-design.com