I Built an APM for Angular That Runs Entirely in Your Browser

GOWTHAM — Wed, 05 Aug 2026 12:43:46 +0000

Every Angular Developer Asks This

"Why is my page taking 8 seconds to load?"
"Which component is re-rendering 30 times?"
"Is this API call redundant?"
"Why did this click freeze the UI?"

Angular DevTools shows you components. ngLens shows you the WHY.

What is ngLens?

ngLens is a Chrome DevTools extension that acts as an Execution Intelligence Platform for Angular. Think APM — but it runs entirely in your browser, requires zero configuration, and never sends data anywhere.

Works with Angular 14–22
Performance overhead: < 3% CPU
Setup: Install → Open DevTools → Done

How It's Different

Angular DevTools gives you a component tree. ngLens gives you:

Feature	Angular DevTools	ngLens
Component tree	✓	✓
WHY it rendered	✗	✓
Waterfall timeline	✗	✓
API → Store → Component chain	✗	✓
Memory leak detection	✗	✓
Impact scoring	✗	✓
Targeted fix per component	✗	✓
Signal tracking (computed, input)	✗	✓
Duplicate API detection	✗	✓
Jank detection (frame drops)	✗	✓

Your App's Health at a Glance

Open ngLens, and in seconds you see:

Risk score (0–100) per component
Top issue with root cause
Suggested fix with expected gain
Memory risks flagged immediately
Environment detection (production/dev mode)

No digging through flame graphs. No guessing.

Execution Explorer — See WHEN Things Happened

A horizontal waterfall timeline — like Chrome's Network tab, but for your Angular app's internal execution flow.

See exactly:

When each component rendered relative to others
Which API call is the bottleneck (highlighted automatically)
How long each operation actually took
The critical path through your app's execution

In the example above, POST /api/orders/search takes 4.67s — that's 55% of total time. You'd know exactly where to optimize.

Render Inspector — Component Cascade + Data Flow

See which components rendered, how many times, and trace the data flow:

Component Cascade — Ranked by render count and time cost
Data Flow — Which API/store action triggered each render
Hotspot indicator — The worst offender highlighted immediately
Action-level breakdown — Click, Change, Input events separated

Causal Chains — Which API Affected Which Component

This is the feature that saves hours of debugging:

GET /api/users → 200 → [AUTH] SET_USER → 3 components
POST /api/orders/search → 200 → [ORDERS] SET_LIST → 5 components
GET /api/notifications → 200 → [NOTIFY] UPDATE → (duplicate flagged!)
[FILTERS] SET_ACTIVE → [FILTERS] SET_RESULTS +2

ngLens automatically:

Links API calls to store actions to component renders
Flags duplicate APIs
Counts impacted components per action

Detect Leaks. Get Actionable Fixes.

Memory Leaks detected:

UserService.notifications$ — Subscribed in DashboardComponent, never unsubscribed after destroy → Fix: takeUntilDestroyed()
setInterval in PollingService — Created every 5s, never cleared → Fix: clearInterval in ngOnDestroy()

Recommendations prioritized by impact:

🔴 HIGH — Add OnPush to DataGridComponent (saves ~300ms per interaction)
🟡 MED — Add trackBy to OrderListComponent (50 items re-created every update)
🟢 LOW — Zone pollution: WebSocket in ChatService → Move to runOutsideAngular()

Full Signal Reactivity Tracking

ngLens captures the full signal chain across Angular versions:

Angular ≤ 16 — RxJS subjects, HTTP, timers, Router
Angular 17+ — computed() recomputation, input() signals
Angular 19+ — linkedSignal(), resource(), httpResource()
Angular 22 — Signal Forms, @Service(), all stable signal APIs

Example traced chain:

UserService.currentUser.set({name: "John"})
  → DashboardComponent.greeting (computed) → "Hello, John"
    → DashboardComponent rendered

Hotspots + Compare Runs

Save a baseline → Make your fix → Capture again → See the improvement instantly.

Metric	Before	After	Change
Render count	156	42	-73%
Avg render cost	4.2ms	1.8ms	-57%
Render frequency	4.2x	1.1x	-74%
Memory risks	2	0	Fixed

Privacy & Security

This was non-negotiable from day one:

✅ All analysis runs locally in your browser
✅ Source code and results never leave your machine
✅ Minimal permissions — only activeTab, scripting, tabs, storage
✅ Strict Content Security Policy
✅ Optional analytics require explicit opt-in
✅ MIT License — fully open source and auditable

Get Started

Install from Chrome Web Store:
🔗 Install ngLens

Or build from source:

git clone https://github.com/patch-work-book/nglens.git
cd nglens
npm install
npm run build
# Load dist/ as unpacked extension in chrome://extensions

patch-work-book / nglens

ngLens

Find Angular performance problems and learn how to fix them.

ngLens is a Chrome Extension that analyzes Angular applications at runtime, identifies performance issues, and teaches you how to fix them — whether you're a junior developer learning Angular or a senior architect optimizing at scale.

Features (V1)

Angular Compatibility — Runtime tracking supports Angular 17-21; Angular 21 has a dedicated smoke check
Angular Detection — Automatically detects Angular apps in both development and production mode
Change Detection Analysis — Flags Default change detection, missing OnPush, and *ngFor without trackBy
Unnecessary Re-render Detection — Identifies excessive DOM mutation frequency, render bottlenecks, and template anti-patterns
Memory Cleanup Risk Detection — Flags possible surviving subscriptions, unmanaged timers, and DOM listeners
RxJS Subscription Cleanup Detector — Detects subscriptions without observed cleanup and recommends takeUntil, takeUntilDestroyed, or async pipe usage
Bundle/Lazy-loading Guidance — Highlights initial load risk areas and lazy…

View on GitHub

What's Next

V2: CD profiler, Zone.js profiler, FPS monitor, interaction latency
V3: Architecture smells, regression detection, Signals migration assistant

Angular DevTools shows you components. ngLens shows you the why.

Give it 30 seconds. That's all it needs.

Found a bug or have feedback? Open an issue — I read every one.

DEV Community: GOWTHAM