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 applications: change detection, signals, RxJS subscriptions, rendering, network and memory — all in one place. Chrome's own Performance tab shows you frames and call stacks. Angular Monitor shows you Angular: which component was checked, which signal wrote, which subscription is still open, and which click caused all three. No account, no telemetry, no backend. Free. HOW TO OPEN IT Angular Monitor is a DevTools panel, not a toolbar popup — there is nothing to click in the toolbar and nothing to configure. 1. Open your Angular app in a tab: a local dev server on any port, a staging URL, or production. 2. Open Chrome DevTools (Cmd+Option+I on macOS, F12 on Windows and Linux). 3. Click the "Angular Monitor" tab in the DevTools tab bar. It may be hidden behind the » overflow menu on the right. 4. Press Start in the panel toolbar. Don't see the tab? Close and reopen DevTools after installing — DevTools only loads extension panels when it starts up. WHAT YOU GET Seventeen tabs in four groups: • Overview — Dashboard, Timeline, What Just Happened. Is anything wrong, and what did the last interaction cost? • Runtime — Inspector, Components, Change Detection, Signals, Router Tree. Which part of the component tree is doing the work? • I/O — Observables, Promises, Memory, Network, Node Modules, Rendering. What is the app waiting on, holding on to, or leaking? • Session — Diagnostics, Overhead, Settings. What did the profiler notice, and what is it costing? The ones worth opening first: • What Just Happened — every click or keystroke as one row, expandable into the change-detection cycles, renders and HTTP calls it caused, in order, with timings. The fastest way to answer "why did that feel slow?" • Components — change-detection passes, render counts and total time per component, sortable and filterable. • Observables — RxJS subscriptions grouped by call site, with subscriber counts and a neighborhood graph, so leaked subscriptions stand out. • Timeline — change detection, long tasks, network requests and user events on one chronological track. • Inspector — pick a component on the page and read its state and signal graph. • Node Modules — the package versions the page actually loaded, with optional known-advisory lookups. MONITORING LEVELS Pick a level in the toolbar to trade detail against overhead: • Disabled — nothing, idle bridge only. No cost. • Lightweight — long tasks, navigation, errors, change-detection counts, HTTP timing. Negligible cost. • Standard — adds components, signals, RxJS and limited Promise tracking. Low cost; this is the default. • Deep — adds the sampling profiler and Promise proxying. Real cost, never enabled automatically. Start at Standard. Drop to Lightweight if the profiler starts showing up in your own measurements — the Overhead tab tells you exactly what it is costing. SETUP: NOTHING TO INSTALL IN YOUR APP Open DevTools on a development build of your Angular app (ng serve), switch to the Angular Monitor tab and press Start. The extension injects its runtime into that tab only, and reads Angular through the same dev-mode debug API Angular DevTools uses. Your project and repository stay untouched. To check it worked: the Dashboard tab reads "Runtime: Built-in". Production builds strip Angular's debug API, so there the panel shows browser-level data only (network, long tasks, FPS, Web Vitals, memory). OPTIONAL: PROFILE PRODUCTION BUILDS To get change detection and RxJS data from a production build as well, add the companion npm package. It hands the runtime Angular's real DI instances: npm install @ebdev/angular-monitor // main.ts import { providePerformanceMonitor } from '@ebdev/angular-monitor'; bootstrapApplication(AppComponent, { providers: [providePerformanceMonitor()], }); On NgModule? It is an environment provider, so it goes in the root module's providers array. It is a no-op until the panel presses Start. With it in place the Dashboard reads "Runtime: npm package". Requirements: Angular 17 to 22. With the package, rxjs is a peer dependency and must resolve to the same instance your app uses. Minified class names make the Components and Inspector tabs much harder to read, so profile a development build where you can. PRIVACY: LOCAL-FIRST, AND SPECIFIC ABOUT IT There is no backend, no account and no analytics. Profiling data lives in the panel and never leaves your machine. • Two permissions. "scripting" to inject the measurement bridge into the tab you are inspecting, and host access so that tab can be on any origin — localhost, staging, or production. No debugger, no tabs, no cookies permission. The bridge is injected only into tabs with the panel open. • One network feature, off by default. The Node Modules tab can look detected packages up on registry.npmjs.org and api.osv.dev to report advisories and newer versions. That sends package names and versions off your machine, so it stays off until you switch it on, from the banner on that tab or Settings → Network. Nothing else in the panel makes a network request. • Redacted by default. Cookies, Authorization headers, request and response bodies, tokens and passwords are never captured, in the panel or in an export. Saved sessions live in your browser's IndexedDB, capped and auto-evicted. Full privacy policy: https://angular-monitor.ebdev-design.com/privacy LINKS Site, docs and a live demo you can profile in your browser right now: https://angular-monitor.ebdev-design.com Companion package: https://www.npmjs.com/package/@ebdev/angular-monitor Support: Admin@ebdev-design.com Angular Monitor is an independent project. It is not affiliated with, endorsed by, or sponsored by Google or the Angular team.