Media
5 items
Description
Deep introspection for Angular apps — Component Tree, HTTP Monitor, Store, Router, DI, Performance, and Source Maps. DevTools Companion for Angular A dedicated 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 highlight it on the page and inspect its inputs, outputs, state, and properties. Edit input and property values inline to see the effect immediately. 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, request and response headers, request body, response body, timing, and duration. Filter by URL, method, or status code to focus on specific endpoints. Slow requests are flagged 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 switching to the Network tab, and correlating HTTP activity with route changes. PERFORMANCE PROFILER Record change detection activity to spot performance bottlenecks. The profiler tracks the total number of cycles, average duration, minimum and maximum duration, and a live timeline of the most recent cycles. Export the recorded data as JSON for offline analysis. SOURCE MAPS Browse the source map files served with the application. Select any mapped file to view its original TypeScript or template source, making it easier to correlate runtime behavior with the pre-compilation code. Available when the application is served with source maps that include original content, which is typical of development builds. ROUTER NAVIGATION Follow route changes as they happen. The router view records the navigation history for the current session, so you can see the sequence of URLs the application moved through while you were inspecting. WORKS WITH PRODUCTION BUILDS When inspecting a production build where Angular's debug APIs are unavailable, the extension detects this and adjusts automatically. The HTTP Monitor, Router navigation view, and Source Maps tab remain available. The Component Tree shows a reduced view based on DOM markers, 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 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 in milliseconds - Auto-clear logs on navigation - Angular detection timeout Settings are saved locally per browser profile. SUPPORTED VERSIONS - Angular 9 and later (Ivy renderer) - Angular Signals - 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.