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

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.