LogoLogo
Development
Development
  • NGXS
    • Overview
  • INTRODUCTION
    • WHY
    • INSTALLATION
    • STARTER KIT
    • SCHEMATICS
  • CONCEPTS
    • STORE
      • Overview
      • Store Schematics
      • Store Options
      • Error Handling
      • Meta Reducers
    • ACTIONS
      • Overview
      • Action Schematics
      • Actions Life Cycle
      • Action Handlers
      • Cancellation
      • Monitoring Unhandled Actions
    • STATE
      • Overview
      • State Schematics
      • Life-cycle
      • Composition
      • Lazy Loading
      • State Operators
      • Custom State Operators
      • Shared State
      • State Token
      • Immutability Helpers
      • Error Handling
      • Sub States
    • SELECT
      • Overview
      • Mapped Sub States
      • Optimizing Selectors
      • Selector Utils
      • Error Handling
      • Signals
      • Select Decorator
  • STYLE GUIDE
  • PLUGINS
    • Overview
    • CLI
    • Logger
    • Devtools
    • Storage
    • Forms
    • Web Socket
    • Router
    • HMR
  • RECIPES
    • Authentication
    • Caching
    • Component Events from NGXS
    • Debouncing Actions
    • Dynamic Plugins
    • Module Federation
    • Unit Testing
    • RxAngular Integration
    • Zoneless Server-Side Rendering
  • COMMUNITY & LABS
    • COMMUNITY
      • FAQ
      • Resources
      • Developer Guide
      • Contributors
      • Contributing
      • Sponsors
    • NGXS LABS
      • Overview
  • DEPRECATIONS
    • Inject Container State Deprecation
    • Sub States Deprecation
    • Select Decorator Deprecation
  • CHANGELOG
Powered by GitBook
On this page
  • Installation
  • Usage
  • Options
  • Notes
  1. PLUGINS

Devtools

PreviousLoggerNextStorage

Last updated 1 year ago

Reference:

Plugin with integration:

Installation

npm i @ngxs/devtools-plugin

# or if you are using yarn
yarn add @ngxs/devtools-plugin

# or if you are using pnpm
pnpm i @ngxs/devtools-plugin

Usage

When calling provideStore, include withNgxsReduxDevtoolsPlugin in your app config:

import { provideStore } from '@ngxs/store';
import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin';

export const appConfig: ApplicationConfig = {
  providers: [provideStore([], withNgxsReduxDevtoolsPlugin())]
};

If you are still using modules, include the NgxsReduxDevtoolsPluginModule plugin in your root app module:

import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';

@NgModule({
  imports: [NgxsModule.forRoot([]), NgxsReduxDevtoolsPluginModule.forRoot()]
})
export class AppModule {}

Options

The plugin supports the following options passed via the forRoot method:

  • name: Set the name by which this store instance is referenced in devtools (Default: 'NGXS')

  • disabled: Disable the devtools during production

  • maxAge: Max number of entries to keep.

  • latency: If more than one action is dispatched in the indicated interval, all new actions will be collected and sent at once. It is the joint between performance and speed. When set to 0, all actions will be sent instantly. Set it to a higher value when experiencing perf issues (also maxAge to a lower value). Default is 500 ms.

  • actionsBlacklist: string or array of strings as regex - actions types to be hidden in the monitors (while passed to the reducers). If actionsWhitelist specified, actionsBlacklist is ignored.

  • actionsWhitelist: string or array of strings as regex - actions types to be shown in the monitors (while passed to the reducers). If actionsWhitelist specified, actionsBlacklist is ignored.

  • predicate: 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. Use it as a more advanced version of actionsBlacklist/actionsWhitelist parameters

  • actionSanitizer: Reformat actions before sending to dev tools

  • stateSanitizer: Reformat state before sending to devtools

  • trace: if set to true, will include stack trace for every dispatched action, so you can see it in trace tab jumping directly to that part of code

  • traceLimit: maximum stack trace frames to be stored (in case trace option was provided as true)

Notes

You should always include the devtools as the last plugin in your configuration. For instance, if you were to include devtools before a plugin like the storage plugin, the initial state would not be reflected.

Redux Devtools
Chrome - Redux Devtools
Firefox - Redux Devtools
Devtools Screenshot