Angular DevTools One devtool to rulethe Angular ecosystem
Components, signals, injectors, routes, forms and stores, live. In the page, from the CLI, in Chrome DevTools, and for your coding agent over MCP.
Built on Devframe
Angular 
AnalogJS 
Vite 
Express 
NgRx 
NativeScript 
Capacitor A few lines to a live panel
Mount the hub where your app runs, load the overlay, and open the panel on your page.
import { initNgDevtoolsHub }
from '@santoshyadavdev/ng-devtools/hub';
const devtools = initNgDevtoolsHub({ ws: false });
app.use(devtools.nodeMiddleware);
// src/main.ts
if (typeof ngDevMode === 'undefined' || ngDevMode) import('@santoshyadavdev/ng-devtools/overlay');▾ <app-root>
▾ <app-search>
query signal = "Lisbon"
results computed = 12 items
▸ <app-trip-list>
▸ <router-outlet>
Everything you can inspect
One inspector per part of Angular, all reading the live page.
Components
Every instance on the page with live inputs, outputs, change detection and injected services.
Signals
The live signal graph of a component, with a value history for each signal.
Injectors
The injector hierarchy, the lookup path for any token, and the providers at each level.
Router
Every navigation as a story: who started it, redirects, timing, and the guard that decided it.
Forms
Signal Forms, reactive and template-driven forms with readable errors, a timeline and a lint.
NgRx Store
Live signal stores and @ngrx/store state with change logs, diffs and restore.
SSR & HTTP
SSR and client HTTP calls, fault injection, hydration stats and the TransferState payload.
Agent tools
More than 40 MCP tools, so your coding agent can read and act on the running app.
Access and redaction
The Vite plugin answers only your machine, the Express hub asks for a one-time code, and secret-looking values are redacted.
Maintainers
The people who build and look after it.
Sponsors
Thanks to the current sponsors. Your support keeps development going.
Ready to look inside?
Install the package, mount the hub, and open the panel on your page.