81 lines (47 sloc) 2.98 KB


Devtools for @ngrx/store.


Install @ngrx/store-devtools from npm:

npm install @ngrx/store-devtools --save OR yarn add @ngrx/store-devtools

Nightly builds

npm install github:ngrx/store-devtools-builds OR yarn add github:ngrx/store-devtools-builds


Instrumentation with the Chrome / Firefox Extension

  1. Download the Redux Devtools Extension

  2. In your AppModule add instrumentation to the module imports using StoreDevtoolsModule.instrument:

import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment'; // Angular CLI environemnt

  imports: [
    // Instrumentation must be imported after importing StoreModule (config is optional)
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
export class AppModule {}

NOTE: Once some component injects the Store service, Devtools will be enabled.

Instrumentation options

When you call the instrumentation, you can give an optional configuration object:


number (>1) | false - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. Default is false (infinite).


boolean - connect to the Devtools Extension in log-only mode. Default is false which enables all extension features.


string - the instance name to be showed on the monitor page. Default value is NgRx Store DevTools.


function - the monitor function configuration that you want to hook.


function - takes action object and id number as arguments, and should return action object back.


function = takes state object and index as arguments, and should return state object back.


false | configuration object - Handle the way you want to serialize your state, more information here.

actionsBlacklist / actionsWhitelist

array of strings as regex - actions types to be hidden / shown in the monitors (while passed to the reducers), more information here.


function - called for every action before sending, takes state and action object, and returns true in case it allows sending the current data to the monitor, more information here.