An open API service indexing awesome lists of open source software.

https://github.com/AmadeusITGroup/ngrx-devtool

Debug NgRx with confidence
https://github.com/AmadeusITGroup/ngrx-devtool

angular ngrx ngrx-effects ngrx-store-devtools

Last synced: 15 days ago
JSON representation

Debug NgRx with confidence

Awesome Lists containing this project

README

          


Amadeus Logo

NgRx DevTool


npm
Angular
NgRx
License


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

---


NgRx DevTool Demo

---

## Quick Start

### 1. Install

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

### 2. Configure your app

```typescript
// 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

```bash
npx ngrx-devtool
```

### 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](https://amadeusitgroup.github.io/ngrx-devtool/)**.

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on how to contribute to this project.