Modern Angular/NgRx Debugging Tool

GitHub Repository

If you've ever debugged an NgRx app by console.log across reducers and effects, this post is for you.

You should use NgRx DevTool, a real-time visual debugger for NgRx applications. It runs as a standalone UI that connects to your app over WebSocket. No browser extension, no permissions, no setup headaches.

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

---

Setup in 2 minutes

Add the meta-reducer and provider to your app config:

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

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

Start the DevTool server:

npx ngrx-devtool

Open localhost:3000 and start your Angular app. Done.

---

What you get

Action Monitoring

Every dispatched action shows up in real time. User actions get a blue border. Actions emitted by effects get an orange border.

Effect Tracking

This is the one that saves hours. Effects are async, they chain, and when something silently fails, good luck.

---

Why not Redux DevTools?

1. No browser extension required. Works in any browser, any environment. No extension permissions.
2. Effect tracking is built in. Redux DevTools shows actions and state it doesn't show you which effect fired, how long it ran, or if it errored.
3. Built for Angular. The architecture uses afterNextRender(), NgRx's EffectSources, and meta-reducers natively.

---

How it works

Three components:

1. Meta-Reducer Wraps your reducers to capture previous/next state and broadcast via WebSocket.
2. DevToolsEffectSources Extends NgRx's EffectSources to instrument effects at registration and track their lifecycle.
3. DevTool UI Receives data on port 4000 and visualizes everything at localhost:3000.

---

Try it

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

Documentation GitHub

Built at Amadeus IT Group open source, MIT licensed. PRs and feedback welcome.

---

And yes we're aware Angular has Signals now. For teams already running NgRx in production, this tool gives you the visibility you need today.