DevTools Companion for Angular

Deep introspection for Angular apps — Component Tree, HTTP Monitor, Store, Router, DI, Performance, and Source Maps.

**DevTools Companion for Angular** A deep inspection panel for Angular applications — built directly into Chrome DevTools. No build instrumentation, no code changes, no setup. Open DevTools on any Angular page and start inspecting. --- **COMPONENT TREE** Browse the full component hierarchy of any Angular application in real time. Click any component to inspect its inputs, outputs, state, and properties. Use the element picker to click directly on a DOM node and jump to the matching component. Search and filter by name to find components instantly in large trees. Works with Angular Ivy (Angular 9+) and detects Angular Signals automatically, displaying their current values alongside regular properties. --- **HTTP MONITOR** Capture every HTTP request made by the application — URL, method, status code, headers, request body, response body, timing, and duration. Filter by URL to focus on specific endpoints. Flag slow requests automatically when they exceed a configurable threshold. Clear the log manually or set it to auto-clear on navigation. Useful for diagnosing API calls, inspecting payloads without opening the Network tab, and correlating HTTP activity with Angular route changes. --- **STORE INSPECTOR** Inspect NgRx, NGXS, and Akita state without installing separate browser extensions. See the current state snapshot, watch it update on every dispatched action, diff the previous state against the current one, and export the full state as JSON. If your app uses plain Angular services instead of a dedicated state library, use Scan Services to snapshot and browse injectable service state directly. --- **ROUTER** See the active Angular route at a glance — current URL, matched path, route parameters, query parameters, and resolved data. Browse the full navigation history for the current session. View the entire route configuration tree to understand how routes are structured and nested. --- **DEPENDENCY INJECTION** Select any component in the Component Tree and see every service injected into it, along with each service's scope (root, module, component) and its current property values. Root-level providers are listed separately. Circular dependency warnings are surfaced when detected. --- **PERFORMANCE PROFILER** Record Angular change detection cycles to identify performance bottlenecks. The profiler tracks total cycles, average duration, min/max duration, and a timeline of the last N cycles. A ranked list shows which components are being checked most frequently and which change detection strategy they use (Default or OnPush). Subscription leak detection flags components that may not be cleaning up properly. Export recorded data as JSON for offline analysis. Set a cycles-per-second alert threshold to get a warning when change detection is running too aggressively. --- **SOURCE MAPS** Browse the source map files served with the application. Select any mapped file to view its original source, making it easier to correlate runtime behavior with the pre-compilation TypeScript or template code. --- **WORKS WITH PRODUCTION BUILDS** When inspecting a production build where Angular's debug APIs are partially unavailable, the extension detects this and adjusts automatically. The HTTP Monitor, Router inspector, and Source Maps tab remain fully functional. The Component Tree and DI inspector show a reduced view with a clear notice rather than failing silently. --- **NO INSTRUMENTATION REQUIRED** DevTools Companion for Angular works by reading Angular's own runtime APIs — the same `ng.*` globals that Angular exposes in development mode. There is nothing to install in your project, no build plugin, no import, and no dependency to add to `package.json`. Open any Angular app and the extension works. --- **SETTINGS** - Light, dark, or system theme - Configurable HTTP history size - Slow request threshold (milliseconds) - Change detection alert threshold (cycles per second) - Auto-clear logs on navigation - Angular detection timeout - Option to enable debug mode on production builds Settings are saved locally per browser profile. --- **SUPPORTED VERSIONS** - Angular 9 and later (Ivy renderer) - Angular Signals (Angular 16+) - Chrome 112 and later --- **LANGUAGES** English, Spanish, French, German, Portuguese, Italian. --- **PRIVACY** This extension does not collect, transmit, or store any data outside your browser. All inspection happens locally between the extension and the page running in your tab. No analytics, no telemetry, no remote requests of any kind. --- **OPEN SOURCE** MIT licensed. Source code available at github.com/devtools-companion/devtools-companion-angular. --- Cuenteo aproximado: **~3,200 caracteres** — muy por debajo del límite de 16,000. Tienes margen para ampliar cualquier sección si quieres más detalle en la ficha de la store.