DevTools Companion for Angular 作成者: Alejandro Alberca

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+.