@ngrx/store-devtools

What is @ngrx/store-devtools?

@ngrx/store-devtools is a powerful tool for debugging and inspecting the state of your Angular applications using NgRx. It provides time-travel debugging, state inspection, and action logging, which can significantly enhance the development experience.

What are @ngrx/store-devtools's main functionalities?

Time-Travel Debugging

Time-travel debugging allows you to go back and forth through the state changes in your application. This is useful for understanding how state evolves over time and for identifying where things might have gone wrong.

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

@NgModule({
  imports: [
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
  ],
})
export class AppModule {}

State Inspection

State inspection allows you to view the current state of your application at any point in time. This can be extremely helpful for debugging and understanding the state of your application.

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: false,
    }),
  ],
})
export class AppModule {}

Action Logging

Action logging provides a log of all the actions that have been dispatched in your application. This can help you understand the sequence of events that led to a particular state.

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: false,
    }),
  ],
})
export class AppModule {}

Other packages similar to @ngrx/store-devtools

redux-devtools

Redux DevTools is a set of tools to help debug Redux applications. It offers similar functionalities to @ngrx/store-devtools, such as time-travel debugging, state inspection, and action logging. However, it is designed for use with Redux rather than NgRx.

mobx-devtools

MobX DevTools provides a set of tools for debugging MobX applications. It includes features like state inspection and action logging, similar to @ngrx/store-devtools, but is tailored for use with MobX.

vue-devtools

Vue DevTools is a set of debugging tools for Vue.js applications. It offers state inspection, time-travel debugging, and action logging, similar to @ngrx/store-devtools, but is specifically designed for Vue.js.

README

@ngrx/store-devtools

The sources for this package are in the main NgRx repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

16.3.0 (2023-10-03)

Bug Fixes

• schematics: make action props plural (#4017) (3a56412)

Features

• data: standalone support for ng add @ngrx/data (#4019) (fdd701e), closes #3935
• eslint-plugin: add avoid-combining-component-store-selectors rule (#4043) (0bff440)
• eslint-plugin: add new avoid-mapping-component-store-selectors rule (#4026) (40477dd), closes #3940
• signals: add patchState function and remove $update method (#4037) (f2514ba)
• signals: add signalState and selectSignal APIs (#4007) (745d91f), closes #3993
• signals: add signalStore and signalStoreFeature (#4049) (0010281), closes #4000
• signals: initial setup (#4002) (b0d63fd), closes #3992
• store: prettify createFeature result (#4014) (f179316)

<a name="16.2.0"></a>