Angular DevTools

The browser DevTools extension for Chrome and Firefox at devtools/. Surfaces the component tree, the injector graph, signal/dependency relationships, route configuration, and a profiler for change-detection cycles. ~43,000 lines of TypeScript.

Purpose

DevTools provides a debugging experience tailored to Angular:

• A component tree view with live property/state inspection.
• A profiler that records every change-detection cycle and attributes time to specific components.
• A router tree view of registered routes.
• A DI graph that visualizes which providers each component sees and the path the injector takes to resolve a token.
• A signal graph (recent addition) showing reactive consumer/producer relationships.

Directory layout

devtools/
├── projects/
│   ├── ng-devtools/             # The DevTools panel UI (Angular app)
│   ├── ng-devtools-backend/     # Code injected into the inspected page
│   ├── shell-browser/           # Browser-extension shell (manifest, background)
│   ├── shell-example/           # Embeddable shell for demos
│   ├── protocol/                # Message types used over the messaging bus
│   ├── shared-utils/            # Helpers shared between panel and backend
│   └── demo-no-zone/            # Test app with zoneless setup
├── src/
│   └── ...
├── tools/                        # Release / packaging scripts
├── docs/                         # User-facing extension docs
└── cypress/                      # E2E test harness

The split between ng-devtools (the panel) and ng-devtools-backend (the injected script) is critical: the panel can use any Angular API, but the backend has to work alongside the inspected app's framework copy and must avoid version assumptions.

Architecture

graph LR
  Page["Inspected page<br/>(running Angular app)"] --> Backend["backend_bundle.js<br/>(injected into page)"]
  Backend --> Detect["detect_angular_bundle.js<br/>(framework version probe)"]
  Backend --> CS["content_script_bundle.js<br/>(content script)"]
  CS --> SW["Background service worker<br/>(extension lifecycle)"]
  CS --> Panel["DevTools panel UI<br/>(ng-devtools, in iframe)"]
  Panel --> CS
  CS --> Backend

Communication goes through chrome.runtime / browser.runtime message passing. The backend exposes a typed protocol defined in devtools/projects/protocol/.

The "development shell" (ng-devtools-shell-dev in code) wraps the same panel in an iframe and uses postMessage instead, so DevTools can be developed as a normal Angular app on http://localhost:4200.

Key abstractions

Component	Where	What it is
Panel root	devtools/projects/ng-devtools/src/	The Angular app that renders the panel UI.
Backend agent	devtools/projects/ng-devtools-backend/src/	The script that runs in the inspected page, walks the component tree, and forwards events.
Protocol	devtools/projects/protocol/src/	Type definitions for all messages flowing across the bus.
Browser shell	devtools/projects/shell-browser/src/	Manifest, content script, background SW, popup.
Detection script	devtools/projects/ng-devtools-backend/src/lib/component-tree/detect-angular-for-extension.ts	Probes the inspected page to decide whether to enable the extension.

Building

pnpm devtools:devserver               # Live-reload panel in iframe at :4200
pnpm devtools:build:chrome:debug      # Build for chrome://extensions sideload
pnpm devtools:build:chrome:release    # Production Chrome build
pnpm devtools:build:firefox:release   # Production Firefox build

Output lands at dist/bin/devtools/projects/shell-browser/src/prodapp. Load it via chrome://extensions (Developer Mode) or Firefox about:debugging.

Testing

• Unit: pnpm devtools:test:unit runs bazel test -- //devtools/....
• E2E: pnpm devtools:test:e2e runs Cypress against the dev server. Headless via pnpm devtools:test:e2e; interactive via pnpm devtools:e2e:open.
• Sample apps for tests live under devtools/cypress/ and devtools/projects/demo-no-zone/.

Integration points

• @angular/core — the backend uses setGlobalUtils and the ng.* debug API documented in packages/core/src/render3/global_utils_api.ts.
• The inspected app's framework version — the backend detects the version and adjusts behavior. Old versions get a degraded experience.
• CDP (Chrome DevTools Protocol) — for the production extension; not used directly in the iframe shell.

Releasing

Releases are managed by devtools/tools/release.mts and submit to:

• The Chrome Web Store.
• The Firefox Add-ons site.

Entry points for modification

• A new panel feature: add a component under devtools/projects/ng-devtools/src/lib/ and a matching backend collector under devtools/projects/ng-devtools-backend/src/lib/. Update the protocol in devtools/projects/protocol/.
• A new probe (e.g., reading a new framework feature): start in the backend; the panel UI follows.
• A debugging-only tool: extend devtools/projects/shared-utils/.