Redux DevTools Extension

To prevent performance issues in applications with high-frequency actions, use these settings:

• latency (number in ms): If multiple actions are dispatched within this interval, they are collected and sent as a single batch. Default is 500 ms. Set to 0 for instant sending.
• maxAge (number > 1): The maximum number of actions to keep in the history tree. Older actions are removed once this limit is reached. Default is 50. Increasing this improves history depth but can impact performance.

The window.__REDUX_DEVTOOLS_EXTENSION__ object provides an advanced API to interact with the Redux DevTools extension directly. This is typically used when you are not using the standard Redux enhancer and want to manually manage state synchronization, listen for monitor actions, or trigger UI changes in the extension.

Available methods include:

• connect([options]): Establishes a connection and returns a controller object.
• disconnect(): Removes listeners and closes the connection.
• send(action, state, [options, instanceId]): Manually pushes an action and state to the monitor.
• listen(onMessage, instanceId): Listens for messages from the monitor for a specific instance.
• open([position]): Opens the extension window.
• notifyErrors([onError]): Enables native notifications for uncaught exceptions.

Install the helper package via npm to enable Redux DevTools integration in your application.

npm install --save redux-devtools-extension

You can configure the Redux DevTools Extension using an options object passed to the following entry points:

• window.__REDUX_DEVTOOLS_EXTENSION__([options])
• window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__([options])()
• window.__REDUX_DEVTOOLS_EXTENSION__.connect([options])
• The redux-devtools-extension npm package using composeWithDevTools(options).

When using the npm package, the options are passed to the enhancer used within createStore.

import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools(options);
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

React Native

Use react-native-debugger, which implements the same API as the Redux DevTools Extension.

Remote Monitoring (Hybrid, Desktop, Server-side)

For most other platforms, include the Remote Redux DevTools's store enhancer. You can then monitor the store remotely by selecting 'Open Remote DevTools' from the extension's context menu.

Redux DevTools allows you to select an action in the history and view the callstack that triggered it. This helps identify the source of events in the action list.

By default, tracing is disabled to avoid performance impacts from generating and serializing stack traces. To enable it, set the trace option to true in your DevTools configuration.

// Example configuration
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__
  ? window.__REDUX_DEVTOOLS_EXTENSION__.withOptions({ trace: true })
  : (store) => store;

Error notifications are disabled by default. To customize this behavior:

1. Go to the extensions page (chrome://extensions/).
2. Find Redux DevTools and click the Options link.

Note: If enabled, notifications only trigger when the store enhancer is called. To force notifications in a non-Redux app, you can explicitly call window.__REDUX_DEVTOOLS_EXTENSION__.notifyErrors() (ensuring the object exists first).

The default keyboard shortcut is Cmd + Shift + E (or Ctrl + Shift + E), which opens the extension popup. This only works if a Redux store is available on the current page.

To view or change available shortcuts, click the "Keyboard shortcuts" button at the bottom of the extensions page (chrome://extensions/).

Depending on your environment, follow these installation steps:

Chrome

• Install from the Chrome Web Store.
• Manual Build: Run npm i && npm run build:extension and load the ./build/extension folder as an unpacked extension.
• Dev Mode: Run npm i && npm start and load the ./dev folder.

Firefox

• Install from Mozilla Add-ons.
• Manual Build: Run npm i && npm run build:firefox and load the ./build/firefox directory.

Electron

• Use the electron-devtools-installer package and specify REDUX_DEVTOOLS.

Other Browsers / Non-browser environments

• Use remote-redux-devtools.

Standard instrumentation does not allow applying the DevTools enhancer multiple times because it would cause every action to be re-dispatched for every liftedStore.

However, if you only need to log actions (without full instrumentation), you can use the devToolsEnhancer from redux-devtools-extension/logOnly. This allows you to apply multiple enhancers with different configurations, such as different blacklists or whitelists.

import { createStore, compose } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension/logOnly';

const store = createStore(reducer, /* preloadedState, */ compose(
  devToolsEnhancer({
    instaceID: 1,
    name: 'Blacklisted',
    actionsBlacklist: '...'
  }),
  devToolsEnhancer({
    instaceID: 2,
    name: 'Whitelisted',
    actionsWhitelist: '...'
  })
));

To ensure the extension is only available during development and not included in your production build, import from redux-devtools-extension/developmentOnly instead of the standard redux-devtools-extension entry point.

// Use this instead of 'redux-devtools-extension' to prevent production usage
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';