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:

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.

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

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.