zalmoxisus/redux-devtools-extension

★ 13,487JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Inspect Redux state
      Replay state history
      Debug data changes
    Installation
      Chrome extension
      Firefox extension
      Electron support
    Setup
      One line of code
      npm helper package
      TypeScript support
    Tech Stack
      JavaScript
      Redux
    Audience
      Frontend devs
      React developers

mindmap root((repo)) What it does Inspect Redux state Replay state history Debug data changes Installation Chrome extension Firefox extension Electron support Setup One line of code npm helper package TypeScript support Tech Stack JavaScript Redux Audience Frontend devs React developers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Debug a React or Redux app by watching every state change live and pinpointing exactly when a bug appears.

USE CASE 2

Step backward and forward through an app's state history to reproduce an intermittent bug.

USE CASE 3

Inspect your Redux store's data shape in the browser without adding console.log statements everywhere.

Tech stack

JavaScriptReduxChrome Extension API

Getting it running

Difficulty · easy Time to first run · 5min

Active development has moved to the official Redux organization, file issues there instead of this repo.

No license information was mentioned in the explanation.

In plain English

This project is a browser extension for debugging applications that use Redux. Redux is a popular library for JavaScript apps that keeps all of an application's data in one central place and changes it through a defined set of steps. The trouble with that approach is that it can be hard to see what changed and why. This extension gives developers a window into that central data store, letting them watch every change as it happens, inspect the data at each point, and step backward and forward through the history of changes to track down bugs. The very top of the README carries a warning: this repository is no longer the home of the extension. Development has moved to a new location under the official Redux organization, and the authors ask people to file issues and pull requests there instead. So while the README still documents how things work, anyone adopting it today is pointed elsewhere for the current version. Most of the README is installation and setup instructions. It can be installed from the Chrome Web Store or Mozilla Add-ons for those two browsers, and there are notes for using it inside Electron, a framework for building desktop apps with web technology, and for other environments through a companion remote package. You can also build it yourself from the source code. The usage section shows the small code changes a developer makes so their app talks to the extension. The simplest case adds one line when the data store is created. There are fuller examples for apps that use extra plugins, for projects written in TypeScript, and for handling the case where the extension is not installed so the app still runs. The README also offers an npm package that wraps these details into a helper function, which reduces the setup to a single import. It closes by covering options you can pass, such as naming your store or filtering which changes are recorded, and notes on using the tool in a production build with extra care. The project is written in JavaScript.

Copy-paste prompts

Prompt 1

I want to add the Redux DevTools Extension to my React app. Show me the minimal code change to enable it when creating my Redux store.

Prompt 2

My Redux app works without the DevTools extension installed but crashes when it is. How do I add a safe fallback so the app runs either way?

Prompt 3

I use Redux Toolkit and want to hook up Redux DevTools. Does configureStore enable it automatically, or do I need extra steps?

Prompt 4

Show me how to configure the Redux DevTools Extension to filter out noisy action types from the log so I can focus on the ones I care about.

Open on GitHub → Explain another repo

← zalmoxisus on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.