0
# @ngrx/store-devtools
1

2
@ngrx/store-devtools provides comprehensive developer tools for @ngrx/store, enabling developers to debug and monitor state management in Angular applications. It integrates with Redux DevTools browser extensions to offer advanced debugging features including time-travel debugging, action inspection, state visualization, and the ability to pause, skip, lock, and export/import action histories.
3

4
## Package Information
5

6
- **Package Name**: @ngrx/store-devtools
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @ngrx/store-devtools`
10

11
## Core Imports
12

13
```typescript
14
import { StoreDevtoolsModule, provideStoreDevtools } from "@ngrx/store-devtools";
15
```
16

17
For specific functionality:
18

19
```typescript
20
import { 
21
  StoreDevtools, 
22
  StoreDevtoolsConfig, 
23
  LiftedState,
24
  DevtoolsDispatcher,
25
  REDUX_DEVTOOLS_EXTENSION 
26
} from "@ngrx/store-devtools";
27
```
28

29
## Basic Usage
30

31
### NgModule Setup
32

33
```typescript
34
import { NgModule } from "@angular/core";
35
import { StoreModule } from "@ngrx/store";
36
import { StoreDevtoolsModule } from "@ngrx/store-devtools";
37

38
@NgModule({
39
  imports: [
40
    StoreModule.forRoot({}),
41
    StoreDevtoolsModule.instrument({
42
      maxAge: 25,
43
      logOnly: false,
44
      autoPause: true,
45
    }),
46
  ],
47
})
48
export class AppModule {}
49
```
50

51
### Standalone Application Setup
52

53
```typescript
54
import { bootstrapApplication } from "@angular/platform-browser";
55
import { isDevMode } from "@angular/core";
56
import { provideStore } from "@ngrx/store";
57
import { provideStoreDevtools } from "@ngrx/store-devtools";
58

59
bootstrapApplication(AppComponent, {
60
  providers: [
61
    provideStore({}),
62
    provideStoreDevtools({
63
      maxAge: 25,
64
      logOnly: !isDevMode(),
65
      autoPause: true,
66
    }),
67
  ],
68
});
69
```
70

71
## Architecture
72

73
@ngrx/store-devtools is built around several key components:
74

75
- **Core Service**: `StoreDevtools` service that manages devtools state and provides debugging methods
76
- **Configuration System**: Comprehensive configuration via `StoreDevtoolsConfig` with feature toggles and customization options
77
- **Action Management**: Complete set of devtools-specific actions for time-travel debugging
78
- **State Enhancement**: `LiftedState` that wraps application state with devtools metadata
79
- **Extension Integration**: Seamless integration with Redux DevTools browser extensions
80
- **Module Integration**: Both NgModule (`StoreDevtoolsModule`) and standalone (`provideStoreDevtools`) setup options
81

82
## Capabilities
83

84
### Configuration and Setup
85

86
Comprehensive configuration options for customizing devtools behavior, including action filtering, state sanitization, feature toggles, and performance options.
87

88
```typescript { .api }
89
interface StoreDevtoolsConfig {
90
  maxAge: number | false;
91
  monitor?: ActionReducer<any, any>;
92
  actionSanitizer?: ActionSanitizer;
93
  stateSanitizer?: StateSanitizer;
94
  name?: string;
95
  serialize?: boolean | SerializationOptions;
96
  logOnly?: boolean;
97
  features?: DevToolsFeatureOptions;
98
  actionsBlocklist?: string[];
99
  actionsSafelist?: string[];
100
  predicate?: Predicate;
101
  autoPause?: boolean;
102
  trace?: boolean | (() => string);
103
  traceLimit?: number;
104
  connectInZone?: boolean;
105
}
106

107
class StoreDevtoolsModule {
108
  static instrument(options?: StoreDevtoolsOptions): ModuleWithProviders<StoreDevtoolsModule>;
109
}
110

111
function provideStoreDevtools(options?: StoreDevtoolsOptions): EnvironmentProviders;
112
```
113

114
[Configuration and Setup](./configuration.md)
115

116
### Core Debugging Service
117

118
Main devtools service providing programmatic access to debugging functionality including time-travel operations, state inspection, and recording controls.
119

120
```typescript { .api }
121
class StoreDevtools implements Observer<any>, OnDestroy {
122
  dispatcher: ActionsSubject;
123
  liftedState: Observable<LiftedState>;
124
  state: StateObservable;
125
  
126
  dispatch(action: Action): void;
127
  performAction(action: any): void;
128
  refresh(): void;
129
  reset(): void;
130
  rollback(): void;
131
  commit(): void;
132
  sweep(): void;
133
  toggleAction(id: number): void;
134
  jumpToAction(actionId: number): void;
135
  jumpToState(index: number): void;
136
  importState(nextLiftedState: any): void;
137
  lockChanges(status: boolean): void;
138
  pauseRecording(status: boolean): void;
139
}
140
```
141

142
[Core Debugging Service](./debugging-service.md)
143

144
### DevTools Actions
145

146
Complete set of action classes and constants for programmatic control of devtools functionality, enabling custom debugging workflows and integrations.
147

148
```typescript { .api }
149
class PerformAction implements Action {
150
  readonly type = 'PERFORM_ACTION';
151
  constructor(public action: Action, public timestamp: number);
152
}
153

154
class Reset implements Action {
155
  readonly type = 'RESET';
156
  constructor(public timestamp: number);
157
}
158

159
class Commit implements Action {
160
  readonly type = 'COMMIT';
161
  constructor(public timestamp: number);
162
}
163

164
// Additional action classes: Refresh, Rollback, Sweep, ToggleAction, 
165
// SetActionsActive, JumpToState, JumpToAction, ImportState, 
166
// LockChanges, PauseRecording
167
```
168

169
[DevTools Actions](./actions.md)
170

171
### State Management Types
172

173
Enhanced state structures and type definitions that provide devtools metadata alongside application state, enabling comprehensive debugging capabilities.
174

175
```typescript { .api }
176
interface LiftedState {
177
  monitorState: any;
178
  nextActionId: number;
179
  actionsById: LiftedActions;
180
  stagedActionIds: number[];
181
  skippedActionIds: number[];
182
  committedState: any;
183
  currentStateIndex: number;
184
  computedStates: ComputedState[];
185
  isLocked: boolean;
186
  isPaused: boolean;
187
}
188

189
interface ComputedState {
190
  state: any;
191
  error: any;
192
}
193

194
interface LiftedAction {
195
  type: string;
196
  action: Action;
197
}
198
```
199

200
[State Management Types](./state-types.md)
201

202
### Extension Integration
203

204
Advanced integration components for Redux DevTools browser extension and custom dispatching.
205

206
```typescript { .api }
207
class DevtoolsDispatcher extends ActionsSubject {}
208

209
const REDUX_DEVTOOLS_EXTENSION: InjectionToken<ReduxDevtoolsExtension>;
210

211
interface ReduxDevtoolsExtensionConnection {
212
  subscribe(listener: (change: any) => void): void;
213
  unsubscribe(): void;
214
  send(action: any, state: any): void;
215
  init(state: any): void;
216
  error(message: string): void;
217
}
218

219
type ZoneConfig = 
220
  | { connectInZone: true; ngZone: NgZone }
221
  | { connectInZone: false; ngZone: null };
222

223
function injectZoneConfig(connectInZone: boolean): ZoneConfig;
224
```
225

226
## Types
227

228
```typescript { .api }
229
type StoreDevtoolsOptions = Partial<StoreDevtoolsConfig> | (() => Partial<StoreDevtoolsConfig>);
230
type ActionSanitizer = (action: Action, id: number) => Action;
231
type StateSanitizer = (state: any, index: number) => any;
232
type Predicate = (state: any, action: Action) => boolean;
233

234
interface DevToolsFeatureOptions {
235
  pause?: boolean;
236
  lock?: boolean;
237
  persist?: boolean;
238
  export?: boolean;
239
  import?: 'custom' | boolean;
240
  jump?: boolean;
241
  skip?: boolean;
242
  reorder?: boolean;
243
  dispatch?: boolean;
244
  test?: boolean;
245
}
246

247
interface SerializationOptions {
248
  options?: boolean | any;
249
  replacer?: (key: any, value: any) => {};
250
  reviver?: (key: any, value: any) => {};
251
  immutable?: any;
252
  refs?: Array<any>;
253
}
254
```