DevTools Companion for Angular 作者： Alejandro Alberca
Deep introspection for Angular apps — Component Tree, HTTP Monitor, Store, Router, DI, Performance, and Source Maps. Firefox & Chrome.
扩展元数据
关于此扩展
DevTools Companion for Angular adds a dedicated panel to Firefox DevTools that lets you inspect any Angular application in real time — no build changes or instrumentation required.
Component Tree — Browse the full component hierarchy of the inspected page. Select any component to view its @Input() bindings, @Output() events, props, change-detection strategy, host element, and source file location. Edit input values live and watch the component update instantly.
HTTP Monitor — Intercepts all Angular HttpClient requests with method, URL, status, duration, request/response headers, and body payload. Filter by method or status code, inspect timing, and replay or copy requests.
Store Inspector — Connects to NgRx, NGXS, Elf, Akita, and MiniRx stores. Displays the full state tree with live updates on every dispatch, plus action log with payload.
Router — Live view of the current Angular Router state: active route, URL, params, query params, and route configuration tree.
DI Inspector — Shows the dependency injection tree for the selected component, listing provided services, their scope (root / module / component), and whether they are overridden.
Performance — Tracks change-detection cycles: count, total time, average time, slowest component, and a timeline chart. Highlights components that trigger excessive checks.
Source Maps — Discovers .js.map files loaded by the page and lets you browse the original TypeScript source with syntax highlighting — no sourcemap server required.
Works with Angular 2 through 19+, detects production and development builds automatically, and supports Firefox 140+.
Component Tree — Browse the full component hierarchy of the inspected page. Select any component to view its @Input() bindings, @Output() events, props, change-detection strategy, host element, and source file location. Edit input values live and watch the component update instantly.
HTTP Monitor — Intercepts all Angular HttpClient requests with method, URL, status, duration, request/response headers, and body payload. Filter by method or status code, inspect timing, and replay or copy requests.
Store Inspector — Connects to NgRx, NGXS, Elf, Akita, and MiniRx stores. Displays the full state tree with live updates on every dispatch, plus action log with payload.
Router — Live view of the current Angular Router state: active route, URL, params, query params, and route configuration tree.
DI Inspector — Shows the dependency injection tree for the selected component, listing provided services, their scope (root / module / component), and whether they are overridden.
Performance — Tracks change-detection cycles: count, total time, average time, slowest component, and a timeline chart. Highlights components that trigger excessive checks.
Source Maps — Discovers .js.map files loaded by the page and lets you browse the original TypeScript source with syntax highlighting — no sourcemap server required.
Works with Angular 2 through 19+, detects production and development builds automatically, and supports Firefox 140+.
评分 0（1 位用户）
权限与数据
更多信息