A development tool for visualizing and debugging NgRx state management in Angular applications.
Real-time action monitoring, effect tracking, state visualization, diff viewer, and performance metrics no browser extensions needed.

Documentation

Quick Start

1. Install

npm install @amadeus-it-group/ngrx-devtool

2. Configure your app

// app.config.ts
import { provideNgrxDevTool, createDevToolMetaReducer } from '@amadeus-it-group/ngrx-devtool';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore(
      { /* your reducers */ },
      { metaReducers: [createDevToolMetaReducer()] }
    ),
    provideEffects([YourEffects]),
    provideNgrxDevTool({
      wsUrl: 'ws://localhost:4000',
      trackEffects: true,
    }),
  ]
};

3. Run the DevTool server

4. Open the UI

Open http://localhost:3000 and start your Angular app.

For full documentation, configuration options, troubleshooting, and more, visit the documentation site.

Contributing

See CONTRIBUTING.md for guidelines on how to contribute to this project.