# DevTools Companion for Angular

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

Canonical page: [https://chrome-stats.com/d/devtools-companion-for-angular](https://chrome-stats.com/d/devtools-companion-for-angular)

## Overview

- **ID:** `devtools-companion-for-angular`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** DevManchego
- **Category:** web-development
- **Daily users:** 2
- **Version:** 1.1.5
- **Last updated:** 2026-07-08
- **First published:** 2026-06-22
- **Size:** 79 KB
- **Data as of:** 2026-09-06
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/devtools-companion-for-angular/)
- **Website:** [https://github.com/dev-codeforge-labs/DevTools-Companion-Angular](https://github.com/dev-codeforge-labs/DevTools-Companion-Angular)
- **Privacy policy:** [https://addons.mozilla.org/firefox/addon/devtools-companion-for-angular/privacy/](https://addons.mozilla.org/firefox/addon/devtools-companion-for-angular/privacy/)

## Description

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.

<strong>Component Tree</strong> — 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.

<strong>HTTP Monitor</strong> — 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.

<strong>Store Inspector</strong> — 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.

<strong>Router</strong> — Live view of the current Angular Router state: active route, URL, params, query params, and route configuration tree.

<strong>DI Inspector</strong> — Shows the dependency injection tree for the selected component, listing provided services, their scope (root / module / component), and whether they are overridden.

<strong>Performance</strong> — Tracks change-detection cycles: count, total time, average time, slowest component, and a timeline chart. Highlights components that trigger excessive checks.

<strong>Source Maps</strong> — 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+.

## Rankings

- #106,064 — Overall
- #123 — component

## Permissions and access

### Permissions

- `activeTab`
- `devtools`
- `storage`
- `scripting`
- `webRequest`

### Host permissions

- `<all_urls>`

### Content script matches

- `<all_urls>`

## Safety

- **Risk impact:** High risk impact
- **Risk likelihood:** High risk likelihood

### Analysis details

- Allows access to all websites, posing a significant security risk as it can monitor and modify data from any visited site.
- This extension has low user count. Unpopular extensions may not be stable or safe.

> Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing).

## Similar extensions and apps

- [Angular DevTools](https://chrome-stats.com/d/angular-devtools) — 9,540 users, 3.35 / 5
- [React Developer Tools](https://chrome-stats.com/d/react-devtools) — 168,599 users, 4.59 / 5
- [Blazor Developer Tools](https://chrome-stats.com/d/blazor-developer-tools) — 8 users
- [Angular state inspector](https://chrome-stats.com/d/angular-state-inspector) — 448 users, 3.42 / 5
- [React Developer Tools Lite](https://chrome-stats.com/d/lightweig-developer-tools) — 1 users
- [Angular state inspector](https://chrome-stats.com/d/angular_state_inspector) — 170 users, 5.00 / 5
- [Alpine.js DevTools Pro](https://chrome-stats.com/d/alpine-js-devtools-pro) — 51 users, 5.00 / 5
- [DevScope - Developer Diagnostics](https://chrome-stats.com/d/devscope) — 2 users
- [React Performance Devtool](https://chrome-stats.com/d/nitin-tulswani) — 116 users, 1.00 / 5
- [TanStack Query DevTools](https://chrome-stats.com/d/tanstack-query-devtools) — 861 users, 5.00 / 5
- [MobiDevTools](https://chrome-stats.com/d/mobidevtools) — 8,240 users, 3.93 / 5
- [Ext JS 3 DevTools](https://chrome-stats.com/d/ext-js-3-devtools) — 4 users

---

Source: [Chrome-Stats](https://chrome-stats.com/d/devtools-companion-for-angular)