Guide · Open source

How to use redux-devtools-extension: setup, store wiring and tips

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Redux DevTools Extension is a browser add-on for developers who use Redux, the state management library for JavaScript apps. Once your store is connected to it, the extension shows each action dispatched and how the state changed in response. This guide covers installing the extension, connecting it to a Redux store, and the options that matter when you go beyond a basic setup.

Redux DevToolszalmoxisus/redux-devtools-extension · ★ 13.4k · MIT Install options & downloads

Quick start

1Install the browser extension. Add Redux DevTools from the Chrome Web Store or Mozilla Add-ons, or build it from source with the README commands.
2Add the hook to your store. Pass window.__REDUX_DEVTOOLS_EXTENSION__() as the last argument to createStore, guarded so it runs only when the extension is present.
3Use compose for middleware. If you use middleware, switch to composeEnhancers with window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ and fall back to compose.
4Add options if needed. Pass options such as name or actionsBlacklist inside the composeEnhancers call.
5Open the extension and check actions. Open your app in the browser, open the Redux DevTools panel, and inspect each dispatched action and the resulting state change.
6Plan for production. Decide whether to ship the extension hook in production, and use logOnlyInProduction if you want to restrict it.

Install the extension in Chrome or Firefox

For Chrome, the README lists the Chrome Web Store as the simplest route. You can also download extension.zip from the project's releases page, unzip it, open chrome://extensions, turn on developer mode, click Load Unpacked and select the extracted folder.

For Firefox, install it from Mozilla Add-ons. The README also describes building from source if you want a local copy.

Chrome: install from the Chrome Web Store, or load an unpacked build.
Firefox: install from Mozilla Add-ons.
Electron: specify REDUX_DEVTOOLS in electron-devtools-installer.
Other browsers or non-browser environments: use remote-redux-devtools.

npm i && npm run build:extension

Build the extension from source (optional)

If you want to build the extension yourself, the README gives these commands. Chrome builds go to ./build/extension, which you load as an unpacked extension. Firefox builds go to ./build/firefox, and you select a file inside that folder when loading it as a temporary add-on.

Node.js and npm are needed only for this route.

Chrome: npm i && npm run build:extension, then load ./build/extension.
Firefox: npm i && npm run build:firefox, then load ./build/firefox.

npm i && npm run build:firefox

Connect a basic Redux store

For a basic Redux store, add the extension hook as the last argument to createStore. The README notes that preloadedState is optional, and the check on window means the code still runs when the extension is not installed.

For universal (isomorphic) apps, prefix the check with typeof window !== 'undefined'. In TypeScript, use the redux-devtools-extension npm package or cast window to any.

The README notes that passing an enhancer as the last argument requires redux 3.1.0 or later. Older setups need a different approach, which the README links to.

Do not install the separate redux-devtools package; the README says it is a different library.
If ESLint blocks underscore-dangle, wrap the line with /* eslint-disable no-underscore-dangle */ and /* eslint-enable */.

const store = createStore(
  reducer, /* preloadedState, */
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

Use middleware and enhancers with compose

If your store uses middleware, use the composeEnhancers pattern. When the extension is not installed, the code falls back to Redux's compose, so the store still works.

To pass extension options such as name, actionsBlacklist, actionsCreators or serialize, call window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ with an options object. The README links to the Arguments documentation for the full list of options.

Without the extension, compose is used.
Options are passed inside the call to __REDUX_DEVTOOLS_EXTENSION_COMPOSE__.

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension's options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
);
const store = createStore(reducer, enhancer);

Use the npm package instead of the window hook

The README describes an npm package, redux-devtools-extension, that gives you composeWithDevTools and devToolsEnhancer as imports. The README says this adds only a few lines of code to your bundle. Use devToolsEnhancer if you have no other middleware or enhancers.

Install it with npm, then import the helper you need.

composeWithDevTools: use when you have middleware or other enhancers.
devToolsEnhancer: use when you have no other enhancers or middleware.

npm install --save redux-devtools-extension

Decide how to handle production builds

The README says it is useful to include the extension in production too, and that you can usually use it for development. If you want to restrict it, import from redux-devtools-extension/logOnlyInProduction instead. The README also notes that you need to set process.env.NODE_ENV to production in your Webpack config for the production bundle, and that create-react-app already does this.

If you already check process.env.NODE_ENV when creating the store, the README suggests redux-devtools-extension/logOnly for production. To disable the extension in production entirely, the README shows a further option that is cut off in the source, so check the repository for the full pattern.

Restricting with logOnlyInProduction is the README's advice for teams that do not want debug tooling in production.
Confirm your Webpack config sets process.env.NODE_ENV for production builds.

import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';

What people use it for

Watching the action history while building a React front end that uses Redux.
Checking how state changes after each dispatched action when debugging a bug.
Adding the extension to an Electron app through electron-devtools-installer.
Inspecting Redux state in a non-browser environment via remote-redux-devtools.

Frequently asked questions

Is redux-devtools-extension free?

The repository is licensed under MIT, according to the project summary. The README does not discuss pricing, so check the license file in the repository for the terms.

What do I need to use redux-devtools-extension?

You need a Chrome or Firefox browser, or Electron for the Electron option. Node.js and npm are needed only if you build the extension from source.

Where do I report issues for redux-devtools-extension?

The README says development moved to github.com/reduxjs/redux-devtools. File issues and pull requests there, not in the zalmoxisus repository.

Can I use redux-devtools-extension in production?

The README says it is useful to include it in production too, but you can restrict it with the logOnlyInProduction import. You also need process.env.NODE_ENV set to production in your Webpack config for production builds.

Do I need the redux-devtools npm package?

No. The README says you do not need to install redux-devtools when using the extension, because it is a different library.

What is the difference between redux-devtools and remote-redux-devtools?

The README mentions redux-devtools only to say it is a different library. It recommends remote-redux-devtools for other browsers and non-browser environments. Check each project's documentation for details beyond that.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Redux DevTools Extension suits developers using Redux in a web app or Electron app who want to see actions and state changes while they debug. It is a poor fit for projects that do not use Redux, and teams that need to keep debug tooling out of production should use the logOnlyInProduction import.

Install options & downloads