I've read the minimalistic docs at https://github.com/ngrx/platform/tree/master/docs/store-devtools, and understood that you can add instrumentation as follows:
StoreDevtoolsModule.instrument({
logOnly: environment.production
})
Supposedly, if the logOnly flag is true, your app will connect to the Redux DevTools extension in a log only mode, it'll have very little overhead as it shouldn't store the state data, but only log the action names that are happening during the runtime.
But in my experiments, I still see the state data in the ngrx DevTools panel, so what're the benefits of using logOnly:true
?
The Ngrx DevTools are a Chrome / Firefox browser extension that includes a UI for inspecting and interacting with a Ngrx-based application.
A simple way to temporarily debug observable chains in general, including ngrx effects and store subscriptions, is via . do() operators before and/or after code that doesn't seem to work. It doesn't perturb the flow of code around it, and it lets you do trace logging or add breakpoints for inspection.
The DevTools are a Chrome / Firefox browser extension that is a UI for inspecting and interacting with NgRx inside of your application. The main features include a log of all NgRx actions, a State inspector, and a time-traveling debugger. inspect the state of the application at any moment in time, making debugging much easier
If you are using NgRx in your Angular project, a must-have is the DevTools. The DevTools are a Chrome / Firefox browser extension that is a UI for inspecting and interacting with NgRx inside of your application. The main features include a log of all NgRx actions, a State inspector, and a time-traveling debugger.
Luckily for the devs using NgRx in their project, the application state is kept in a single location and all the actions that can modify it are easily traceable with some great DevTools. As NgRx adheres to the redux pattern, we can use the same Redux DevTools as we would use for any other Redux base application.
This repository is for version 3.x of of @ngrx/store-devtools. Devtools for @ngrx/store. In your root Angular module import StoreDevtoolsModule.instrumentOnlyWithExtension ():
If you scroll down a little bit on that link you sent you will see:
logOnly: boolean - connect to the Devtools Extension in log-only mode. Default is false which enables all extension features.
With a link to the extensions features.
Based on this we can assume that setting logOnly
to true
will switch the following redux-devtools-extension features off:
const composeEnhancers = composeWithDevTools({
features: {
pause: true, // start/pause recording of dispatched actions
lock: true, // lock/unlock dispatching actions and side effects
persist: true, // persist states on page reloading
export: true, // export history of actions in a file
import: 'custom', // import history of actions from a file
jump: true, // jump back and forth (time travelling)
skip: true, // skip (cancel) actions
reorder: true, // drag and drop actions in the history list
dispatch: true, // dispatch custom actions or action creators
test: true // generate tests for the selected actions
},
});
This is ideal for production environments as you may not need or want these primarily dev-focused features running in your live application.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With