Overview
A landing dashboard with Angular version, plugin count, and a snapshot of your app at a glance.
Inspect components, routes, signals, and assets without ever leaving your browser. A drop-in dev panel that mounts itself in dev mode and disappears in production.
Every built-in plugin works the moment you install. Add your own with the same API.
A landing dashboard with Angular version, plugin count, and a snapshot of your app at a glance.
Live tree of every Angular component on the page. Inspect state, unwrap signals, and jump to source.
Every registered route, the active match, guards, and lazy chunks — with one-click navigation.
Every loaded image, font, script, and fetch. Type filters, previews, and where-used DOM mapping.
Point-and-click any element to reveal its component, copy a precise selector, and open the source.
Live share-card preview, Open Graph and Twitter tag tables, and checks for titles, descriptions, and canonicals.
Record change detection: per-component render counts and timings, CD cycle stats, and hot-spot highlighting.
Auto-detects NgRx or NGXS, renders the store as an expandable tree, and logs every dispatched action.
One provider. The dev tool gates itself on isDevMode(), so production builds tree-shake it out — zero runtime cost when shipped.
npm install ng-inapp-dev-tool --save-dev// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideInAppDevTools } from 'ng-inapp-dev-tool';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideInAppDevTools({
editor: 'vscode',
projectRoot: '/absolute/path/to/your/repo',
}),
],
};import { Plugin } from 'ng-inapp-dev-tool';
import { MyToolComponent } from './my-tool.component';
const myPlugin: Plugin = {
name: 'My Tool',
icon: '<svg ...></svg>',
order: 10,
component: MyToolComponent,
};
provideInAppDevTools({
plugins: [myPlugin],
});A plugin is just an Angular component plus a name and an icon. Pass them through the same provider — they'll appear in the sidebar next to the built-ins.
Read the plugin guide →This page runs a real NgRx store. Open the dev tool with the floating button in the corner, pick the State plugin, then press the buttons here — the state tree and the action log update as you click.