| title | Introduction |
|---|---|
| description | What the devtools inspect, and the ways you can run them. |
The devtools inspect a running *Angular app. They read components, signals, injectors, routes, forms, pipes, NgRx stores, HTTP calls and hydration. They also scan your source files, so they can answer questions before the app even runs.
The same tool runs in several places. It is built with *Devframe, so one definition powers every mode.
Everything ships in@santoshyadavdev/ng-devtools: the server side, the browser overlay, the in-page popup, the CLI and the built UI. See Installation.
These tabs read the running page through Angular's debug API. They need a development build.
Every component instance on the page, with live inputs, outputs, change detection, encapsulation, DOM listeners, host directives and injected services. Hover a row to highlight the element. The live signal graph of one component (signal, computed, linkedSignal and effect nodes with their edges), plus a value history per signal. The element and environment injector hierarchy, the lookup path for a token, and the providers at each level. The live route, every navigation as a full story, the live route config with URL testing, the router setup and a route lint. Every Signal Form, reactive form and template-driven form, with values, status, readable errors, a change timeline and a lint. Custom and built-in pipes, where they are used, live instances, call recording, async subscriptions and a pipe lint. Live@ngrx/signals stores with a change log, diffs and state restore, plus the @ngrx/store state and action log.
An HTTP timeline for SSR and client calls, fault injection, hydration stats and the TransferState payload.
| Tab | What it shows |
|---|---|
| Dashboard | The Angular and TypeScript versions, SSR status and a count for each inspector. |
| Analog | File routes, server calls, render modes, content and lint for *Analog apps. |
The devtools also read your source files. Components, routes, signals, providers, NgRx declarations and pipes show up even with no page connected. The standalone CLI and the static report run on the source scan alone.
The inspectors are exposed as *MCP tools and resources, so a coding agent can read and act on the running app. See MCP server.
Your app's server hosts the devtools, and a script in the page sends live data to it. A floating button on the page opens the panel next to your app.
| Setup | Server part | Guide |
|---|---|---|
| Angular CLI with SSR | initNgDevtoolsHub() |
Angular CLI and Express |
| SSR on Hono, h3 or Fastify | initNgDevtoolsHub() |
Hono, h3 and Fastify |
| Analog | The Vite plugin | Vite and Analog |
| Chrome DevTools (extra) | One of the setups above | Chrome extension |
| Mode | What you get |
|---|---|
| Standalone CLI | A local server that serves the devtools UI over the source scan. |
| Static report | An offline HTML build of the source scan. |
| MCP server | Every inspector exposed to coding agents over stdio. |
All three come from the ng-devtools binary. See Standalone CLI.
The devtools are a Devframe tool. Devframe lets one tool definition run in many places, so the inspectors, the RPC functions and the agent tools are written once.
The same definition serves the embedded panel, the standalone CLI, the static report, the MCP server and the Chrome extension. The hub comes from@devframes/hub, so other Devframe tools can join the same dock next to the devtools.
The UI talks to the server over Devframe RPC, and live data sits in shared state that the UI and agents both read.
An RPC function marked for agents becomes an MCP tool, and shared state is exposed as MCP resources.
The package declares Angular 20 and later as its peer range.
The package runs on Node.js 22 and newer.
Live data comes from window.ng, which production builds remove.
The devtools read Angular's debug API. In a production build the overlay has nothing to read, so the live tabs stay empty. The source scan still works.
No. The overlay adds a floating button to your page and opens the devtools in a panel. The Chrome extension is optional. It adds the same UI as a panel in Chrome DevTools.
The devtools need a server part. An Angular CLI app mounts it in its Express server.ts. An Analog app gets it from the Vite plugin. Without either, the standalone CLI serves the source scan.
Not if you follow the setup guides. They load the overlay with a dynamic import that only runs in development builds.
By default, no. The Vite plugin only answers requests from your machine, and the Express hub asks for a one-time code. See Access and redaction.
Add the package and pick how you want to run it.
Mount the devtools in the Express server of an SSR app.
Add the Vite plugin next to analog().
Give your coding agent access to the inspectors.