Angular Highlight

Angular Highlight shows you exactly which components re-render and when — just like React DevTools' "Highlight updates when components render" feature, but for Angular. How to use 1. Open any Angular app 2. Click the Angular Highlight icon in the toolbar 3. Toggle ON — components will flash green every time change detection runs 4. Toggle OFF to stop Works with all Angular versions • Zone.js apps (Angular v2–v18): hooks into Zone.prototype.runTask to detect when Angular's change detection completes • Signals & Zoneless apps (Angular v16+): uses MutationObserver to catch DOM updates and traces them back to the responsible component Why is this useful? • Spot components that re-render too often • Verify that OnPush optimization is working • Debug unexpected change detection cycles • Understand how user interactions propagate through your app AI diagnosis (optional, beta — OFF by default) When a component re-renders many times in a short period, the extension can ask Jev (https://typesafe.ai), a judgment-focused AI model by TypeSafe AI, whether it is excessive, what the likely cause is, and how urgent it is. The result appears as a red badge above the component (click the badge to dismiss it). • Requires your own TypeSafe API key. Enter it in the popup and turn the toggle ON — nothing is sent until you do • Trigger: a component re-rendering N times within 2 seconds (default 10, adjustable from 3 to 30 in the popup). Only components whose DOM actually changes are counted. The default is a rule of thumb, not a statistically derived value • Each component is diagnosed only once per page load, and at most 5 diagnoses are made per page load, so the number of (billable) API requests stays small • Cause: OnPush not used / re-rendered along with its parent / functions or objects recreated on every render / undetermined • Suggested fix: OnPush / run outside the Angular zone / debounce or throttle / signals / no action needed • Update type: likely intentional (clock, animation, polling) or not — intentional updates are labeled, not hidden • Items the AI is not confident about are not shown • Priority: Low / Medium / High • Data sent to the Jev API (only while enabled): change detection strategy (OnPush or Default), re-render count, app type (Zone.js or Zoneless), whether the component has a parent, and what triggers change detection (only the kind of event or API, such as mousemove or setInterval). Component names, page content, URLs, and user input are never sent • Your API key is stored locally in chrome.storage.local and is used only by the extension's background service worker; it is never exposed to the page Technical details • Uses __ngContext__ (Angular Ivy, v9+) to identify component host elements • Works on both development and production builds • Throttled to 150ms to minimize performance impact on the page • No data collection by default — all state is stored locally via chrome.storage.local. The only network request the extension can make is the optional AI diagnosis described above