Media
5 items
Description
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: TWO PIECES Angular exposes no public API that lets an extension read change detection, signals or RxJS from outside the app, so the collectors have to run inside it. The panel is the viewer; the companion npm package is the source, and the panel stays empty until your app provides it. npm install @ebdev/angular-monitor