Angular DevTools Browser Extension

Relevant source files

• devtools/projects/demo-no-zone/src/BUILD.bazel
• devtools/projects/demo-no-zone/src/index.html
• devtools/projects/ng-devtools-backend/BUILD.bazel
• devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
• devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.spec.ts
• devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts
• devtools/projects/ng-devtools-backend/src/lib/directive-forest/control-flow.ts
• devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts
• devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts
• devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts
• devtools/projects/ng-devtools-backend/src/lib/hooks/BUILD.bazel
• devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts
• devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.spec.ts
• devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts
• devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts
• devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/shared.ts
• devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/ng-debug-api.spec.ts
• devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/ng-debug-api.ts
• devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/supported-apis.ts
• devtools/projects/ng-devtools-backend/src/lib/router-tree.spec.ts
• devtools/projects/ng-devtools-backend/src/lib/router-tree.ts
• devtools/projects/ng-devtools/src/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/application-environment/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/application-operations/index.ts
• devtools/projects/ng-devtools/src/lib/application-providers/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/application-providers/settings_provider.ts
• devtools/projects/ng-devtools/src/lib/application-services/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/application-services/settings.ts
• devtools/projects/ng-devtools/src/lib/application-services/settings_store.ts
• devtools/projects/ng-devtools/src/lib/application-services/settings_store_spec.ts
• devtools/projects/ng-devtools/src/lib/application-services/test-utils/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/application-services/test-utils/app_operations_mock.ts
• devtools/projects/ng-devtools/src/lib/application-services/test-utils/settings_mock.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
• devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
• devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.scss
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/component-data-source.spec.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/index.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index-forest.spec.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-pane/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.html
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-pane/property-view/property-view-body/dependency-viewer/resolution-path/resolution-path.component.scss
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.spec.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.html
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.spec.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.html
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.scss
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree-fns.spec.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree-fns.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html
• devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss
• devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts
• devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/BUILD.bazel
• devtools/projects/ng-devtools/src/lib/devtools.component.html
• devtools/projects/ng-devtools/src/lib/devtools.component.scss
• devtools/projects/ng-devtools/src/lib/devtools.component.ts
• devtools/projects/ng-devtools/src/lib/shared/split/split.component.ts
• devtools/projects/ng-devtools/src/lib/shared/tree-visualizer/tree-visualizer.component.scss
• devtools/projects/ng-devtools/src/lib/shared/tree-visualizer/tree-visualizer.component.ts
• devtools/projects/ng-devtools/src/lib/shared/tree-visualizer/tree-visualizer.ts
• devtools/projects/ng-devtools/src/public-api.ts
• devtools/projects/ng-devtools/src/styles/BUILD.bazel
• devtools/projects/ng-devtools/src/styles/_global.scss
• devtools/projects/ng-devtools/src/styles/chrome.scss
• devtools/projects/ng-devtools/src/styles/firefox.scss
• devtools/projects/protocol/BUILD.bazel
• devtools/projects/protocol/src/lib/messages.ts
• devtools/projects/shell-browser/src/BUILD.bazel
• devtools/projects/shell-browser/src/app/BUILD.bazel
• devtools/projects/shell-browser/src/app/app.component.ts
• devtools/projects/shell-browser/src/app/app.config.ts
• devtools/projects/shell-browser/src/app/backend.ts
• devtools/projects/shell-browser/src/app/background.ts
• devtools/projects/shell-browser/src/app/chrome-application-environment.ts
• devtools/projects/shell-browser/src/app/chrome-application-operations.ts
• devtools/projects/shell-browser/src/app/chrome-message-bus.ts
• devtools/projects/shell-browser/src/app/chrome-window-extensions.ts
• devtools/projects/shell-browser/src/app/comm-utils.spec.ts
• devtools/projects/shell-browser/src/app/comm-utils.ts
• devtools/projects/shell-browser/src/app/content-script.ts
• devtools/projects/shell-browser/src/app/detect-angular.ts
• devtools/projects/shell-browser/src/app/konami-code.service.ts
• devtools/projects/shell-browser/src/app/ng-validate.ts
• devtools/projects/shell-browser/src/app/same-page-message-bus.ts
• devtools/projects/shell-browser/src/environments/BUILD.bazel
• devtools/projects/shell-browser/src/index.html
• devtools/projects/shell-browser/src/manifest/manifest.chrome.json
• devtools/projects/shell-browser/src/manifest/manifest.firefox.json
• devtools/projects/shell-browser/src/styles.scss
• devtools/src/BUILD.bazel
• devtools/src/app/demo-app/todo/routes/routes.module.ts
• devtools/src/demo-application-operations.ts
• devtools/src/iframe-message-bus.ts
• devtools/src/index.html
• devtools/src/zone-unaware-iframe-message-bus.ts
• devtools/tools/defaults.bzl
• goldens/public-api/core/global_utils.api.md
• packages/core/src/di/create_injector.ts
• packages/core/src/di/forward_ref.ts
• packages/core/src/render3/debug/chrome_dev_tools_performance.ts
• packages/core/src/render3/global_utils_api.ts
• packages/core/src/render3/profiler.ts
• packages/core/src/render3/util/control_flow.ts
• packages/core/src/render3/util/control_flow_types.ts
• packages/core/src/render3/util/global_utils.ts
• packages/core/test/acceptance/chrome_dev_tools_performance_spec.ts
• packages/core/test/acceptance/control_flow_utils_spec.ts
• packages/core/test/acceptance/standalone_spec.ts
• packages/core/test/render3/global_utils_spec.ts

Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications. It allows developers to inspect the component hierarchy, visualize dependency injection trees, debug router configurations, and profile change detection performance.

Extension Architecture

The architecture of Angular DevTools is divided into three main layers: the Frontend (the UI inside the DevTools panel), the Backend (running in the context of the application), and the Shell (browser-specific integration).

Communication Layers

Communication is orchestrated via a MessageBus that abstracts the underlying browser messaging APIs.

1. Frontend (UI): Built with Angular and Angular Material. It manages the state of the DevTools tabs (Components, Profiler, etc.) devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts63-172
2. Backend: Injected into the user's page. It uses Angular's internal ɵ APIs to extract information about the component tree and injectors devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts67-126
3. Content Script: Acts as a bridge between the Frontend and the Backend devtools/projects/shell-browser/src/manifest/manifest.chrome.json45-50
4. Background Script: Manages the lifecycle of the extension and communication across different tabs devtools/projects/shell-browser/src/app/background.ts1-20

System Component Diagram

The following diagram maps the high-level communication flow to specific code entities.

Sources:

• devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts63-172
• devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts67-126
• devtools/projects/shell-browser/src/app/BUILD.bazel169-180
• devtools/projects/shell-browser/src/manifest/manifest.chrome.json33-51

---

Component Tree Inspection

The "Components" tab allows developers to explore the DirectiveForest. The backend indexes the application's component tree and serializes it for the frontend.

Key Implementation Details

• Re-indexing: The backend forces a re-indexing of the component tree via initializeOrGetDirectiveForestHooks().indexForest() when requested devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts141-146
• Serialization: Component and directive properties are serialized using serializeDirectiveState and deeplySerializeSelectedProperties to safely transmit them across the message bus devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts45-47
• Property Resolution: The ElementPropertyResolver on the frontend handles the retrieval and expansion of nested properties devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts132-133

Sources:

• devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts124-184
• devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts136-165
• devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts188-202

---

Dependency Injection (DI) Visualization

The "Injector Tree" tab visualizes both the Element Injector hierarchy and the Environment Injector hierarchy.

DI Data Flow

1. Backend Capture: The backend uses ɵgetInjectorResolutionPath to determine the path from a specific element to the root injector devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts91-98
2. ID Mapping: To maintain references across the bus, the backend uses WeakMap and FinalizationRegistry to map Injector instances to unique IDs devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts54-64
3. Frontend Visualization: The InjectorTreeComponent transforms these resolution paths into a tree structure suitable for D3.js rendering devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts110-115

DI Entity Mapping

Sources:

• devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts54-106
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts140-152
• devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree-fns.ts1-48

---

Router Tree Debugging

The "Router Tree" tab provides a visual representation of the application's route configuration.

Implementation Features

• Route Parsing: The backend parses the router configuration and extracts metadata such as guards (canActivate, canDeactivate), resolvers, and data devtools/projects/protocol/src/lib/messages.ts206-213
• Navigation: Developers can trigger navigation directly from DevTools using navigateRoute, which calls the backend's ɵnavigateByUrl wrapper devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts172-180
• Source Code Links: The extension can open the source code for components and guards in the browser's "Sources" panel via getRouterCallableConstructRef devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts189-196

Sources:

• devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts63-115
• devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts172-196
• devtools/projects/protocol/src/lib/messages.ts20-25

---

Message Protocol

The communication between the frontend and backend is strictly typed via a set of interfaces defined in the protocol package.

Common Message Types

Message Event	Direction	Purpose
queryNgAvailability	FE -> BE	Check if Angular is running in dev mode devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts82
getLatestComponentExplorerView	FE -> BE	Request the current component tree devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts77-80
latestComponentExplorerView	BE -> FE	Send serialized component tree data devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts125-127
setSelectedComponent	FE -> BE	Notify backend which component is selected devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts87
updateState	FE -> BE	Update a property value on a component devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts95

Sources:

• devtools/projects/protocol/src/lib/messages.ts1-249
• devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts67-126
• devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts114-139