Media
4 items
Description
See WHEN things happen, WHY components re-render. Find bottlenecks instantly. All analysis is local. ngLens is a Chrome DevTools extension that analyzes Angular applications at runtime and identifies performance issues that matter. ### WHAT NGLENS DETECTS: • Unnecessary component re-renders and excessive DOM mutations • Missing OnPush change detection strategy opportunities • Missing trackBy in *ngFor loops causing unnecessary renders • Uncleared subscriptions and timers leading to memory leaks • Large component trees and deep nesting issues • Slow initial load patterns and performance bottlenecks • Zone.js pollution and inefficient zone runs • Poor state management patterns and anti-patterns • Expensive Angular Signals computations and patterns ### HOW IT WORKS: • **Waterfall Timeline** — See APIs, renders, and state changes in one view • **Bottleneck Detection** — Instantly find what's slowing you down • **Component Renders** — Exact render counts per component with deduplication • **Data Flow** — Trace which API affected which component • **Live Updates** — Real-time metrics while you interact with your app ### WORKS WITH: ✅ Angular 12-22 ✅ Standalone + Modules ✅ Signals (Angular 17+) ✅ Micro-frontends & SSR ### PRIVACY: 🔒 All analysis is local — nothing leaves your browser ### GET STARTED: 1. Install ngLens 2. Open DevTools (F12) 3. Click the ngLens tab 4. Interact with your app 5. Watch metrics update in real-time **Tier 1 testing — your feedback shapes v1.1+**