Inspect components, signals, injectors, routes, forms, pipes, NgRx stores and HTTP calls. In the page, from the command line, or through a coding agent.

Introduction

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.

What it inspects

Live inspectors

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.

Project overview

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.

Source scan

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.

Agent tools

The inspectors are exposed as MCP tools and resources, so a coding agent can read and act on the running app. See MCP server.

Ways to run it

Inside your app

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

Outside your app

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.

Built on Devframe

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.

What Devframe provides

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.

Requirements

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.

FAQ

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.

Where to next

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.