Skip to content

Guide · Open source

How to use redux-devtools: install, build and debug Redux state

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

Redux DevTools is a set of debugging tools for apps that manage state with Redux or a similar architecture. This guide is for developers who want to inspect state changes while they debug, and it explains the options the project describes: a browser extension, a standalone app, a React component, and a clone-and-build route from the repository. By the end you will know which option fits your project and how to get started with each.

Redux DevToolsreduxjs/redux-devtools · ★ 14.4k · MIT

Quick start

  1. 1Pick your option. Decide whether you need the browser extension, the standalone app or the React component. The README lists all three.
  2. 2Install pnpm. Install pnpm using the installation page linked from the README. pnpm is the only prerequisite named for the clone-and-build route.
  3. 3Clone the repository. Run git clone https://github.com/reduxjs/redux-devtools to get the source.
  4. 4Install dependencies. From the repository folder, run pnpm install.
  5. 5Build the packages. Run pnpm run build:all to build every package, or use pnpm --filter to build only the package you need.
  6. 6Connect your app or extension. For the extension, follow the README's installation link. For your own app, follow the manual integration guide for the React component.

What Redux DevTools does

Redux DevTools gives you developer tools for the Redux development workflow, or for any other architecture that handles state change. The project's README points to a list of integrations for those other architectures.

The README describes features such as hot reloading, action replay and a customizable UI. These tools target developers who are debugging how state changes over time.

  • Hot reloading
  • Action replay
  • Customizable UI

Choose how you want to run it

The README lists three ways to use Redux DevTools. Pick the one that matches your workflow.

The browser extension is available for Chrome, Edge and Firefox. The standalone app is a separate package in the repository. The React component is meant to be integrated into your client app.

  • Browser extension for Chrome, Edge or Firefox
  • Standalone app from the redux-devtools-app package
  • React component integrated into your client app

Install the browser extension

For the browser extension, the README links to the extension's own installation and configuration section, and to store listings for Chrome, Edge and Firefox. Use the store link for your browser.

The README's Documentation list also links to Extension Options (Arguments), Extension Methods (Advanced API), Troubleshooting, Recipes and FAQ pages. Check those if the extension does not behave as expected.

  • Chrome, Edge and Firefox store listings are linked from the README
  • Extension options and methods are documented separately
  • Troubleshooting and FAQ pages are linked from the README

Integrate the React component

To embed a state inspector in your own app, the README links to a manual integration guide as a React component. This is useful when you want the inspector inside your application rather than in the browser toolbar.

The README also links to remote monitoring documentation for sending state information to a separate viewer.

  • Manual integration guide: docs/Walkthrough.md#manual-integration
  • Remote monitoring: docs/Integrations/Remote.md

Clone and build the repository

Redux DevTools is a monorepo powered by pnpm. Install pnpm first, following the pnpm installation page linked in the README, then clone the repository and install dependencies.

The README says each package's dependencies must be built before the package itself can be built. You can build everything at once, or build only the packages you work on using pnpm workspace commands.

  • Prerequisite: pnpm
  • Build all packages with pnpm run build:all
  • Build a single package with pnpm --filter "remotedev-redux-devtools-extension" build
git clone https://github.com/reduxjs/redux-devtools pnpm install pnpm run build:all

What people use it for

  • Inspecting how actions change state while debugging a React app that uses Redux
  • Replaying recorded actions to reproduce a bug
  • Embedding a state inspector inside your own application
  • Monitoring state changes remotely using the remote monitoring docs
  • Contributing to or customizing the redux-devtools packages from source

Frequently asked questions

Is redux-devtools free to use?

The project is released under the MIT licence, according to the repository's details. The README does not describe any paid tier for the tools.

What do I need to install redux-devtools?

For the clone-and-build route, the README names pnpm as the prerequisite. You clone the repository, run pnpm install, then run pnpm run build:all.

Can I use redux-devtools in Firefox?

Yes. The README links a browser extension listing for Firefox, along with listings for Chrome and Edge.

Does redux-devtools only work with Redux?

The README says it can be used with Redux or any other architecture which handles state change, through the integrations it links to.

Is redux-devtools meant for production monitoring?

The README frames these tools as a development workflow aid. If you need production monitoring, check whether this project fits that need before relying on it.

What are alternatives to redux-devtools?

Comparable projects include MobX DevTools and Reactotron. The Redux DevTools Extension is the same project listed separately in some stores.

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 is a good fit for developers who use Redux or a compatible state architecture and want to inspect state changes while debugging, either in the browser or inside their own React app. If you do not use Redux or a compatible architecture, or you need a production monitoring product, look at alternatives such as MobX DevTools or Reactotron instead.

Install options & downloads