Skip to content

Redux DevTools

Browser extension that lets you inspect and time-travel through Redux state changes.zalmoxisus/redux-devtools-extension

Stars
13.4k
Forks
1k
Licence
MIT
Language
JavaScript
Last update
3.0 years ago
Type
Dev tool

No commits in over a year — check for forks or alternatives before adopting.

What it is

Redux DevTools Extension is a browser add-on for developers who use Redux, a state management library for JavaScript apps. Once your store is wired to it, the extension shows each action dispatched and how the state changed in response, so you can debug what your app is doing. The README also describes an npm package for wiring it into code and a separate remote option for other environments.

  • Watch each dispatched action and the resulting state change while clicking through your app
  • Add the extension's enhancer to a Redux store with a one-line change in the store setup
  • Pass options such as name, actionsBlacklist, or serialize to customize what gets logged
  • Use the npm package composeWithDevTools when your store also uses middleware

Great for

  • JavaScript developers debugging Redux state in a web app
  • Teams who want to inspect action history while developing React or other Redux-based front ends
  • Developers building Electron apps who want the extension installed via electron-devtools-installer

Not ideal for

  • People who do not use Redux, since the extension is built around Redux stores
  • Anyone expecting the active project to be here: the README says development moved to github.com/reduxjs/redux-devtools, so issues and PRs belong there
  • Teams that must avoid shipping debug tooling to production without extra setup, since the README advises restricting it with the logOnlyInProduction import
Step-by-step guide: how to use Redux DevToolsInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install the browser extension

    You'll need: A Chrome or Firefox browser, or Electron for the Electron option · Node.js and npm, only if you build from source

    Build the Chrome extension from source

    npm i && npm run build:extension

    Build the Firefox extension from source

    npm i && npm run build:firefox
  2. 2

    Run it

    • Install the extension from the Chrome Web Store or Mozilla Add-ons, or build it from source
    • Add window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() as the enhancer in your createStore call
    • Run your app and open the browser developer tools to find the Redux tab
  3. 3

    Get the most out of it

    • Pass options such as name, actionsBlacklist, actionsCreators, and serialize to the enhancer to tune what is logged
    • Use the redux-devtools-extension npm package for TypeScript definitions instead of casting window to any
    • Use redux-devtools-extension/logOnlyInProduction if you want the extension active only in production builds
    • Use remote-redux-devtools for environments the browser extension does not support

Downloads

Strengths

  • Simple setup: a single line adds the enhancer to a basic Redux store
  • Installable from Chrome Web Store and Mozilla Add-ons, with a documented build-from-source path
  • Has a remote option (remote-redux-devtools) for browsers and non-browser environments the extension does not cover

Trade-offs

  • The README says this repository is no longer the home of the project, so it may not receive new development here
  • Wiring it up requires editing your store code, and the README notes ESLint and TypeScript adjustments may be needed
  • Using it in production needs extra configuration, such as setting NODE_ENV in your bundler

How it compares

ProjectStarsTypeLevelUpdatedBest for
redux-devtools-extension (this)13.4kDev toolbeginner3.0 years agoJavaScript developers debugging Redux state in a web app
redux-devtools14.4kDev toolintermediate4 days agoDevelopers building React or other apps that use Redux
redux-toolkit11.2kLibraryintermediate4 days agoDevelopers already using or learning Redux for app state
reactide10.5kDev toolintermediate3.8 years agoDevelopers who build React apps and want the editor, preview, and terminal in one window
webpack-dashboard14kDev toolbeginner2.2 years agoFrontend developers who run webpack-dev-server or webpack in watch mode daily
redux61.4kLibraryintermediate16 days agoDevelopers building larger front-end apps where many components share the same data

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.