redux-devtools-extension
Redux DevTools extension.
A browser extension that gives developers a panel to watch, inspect, and replay every state change in a Redux-powered JavaScript app. Development has moved to the official Redux organization repository.
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.
Where it fits
- Debug a React or Redux app by watching every state change live and pinpointing exactly when a bug appears.
- Step backward and forward through an app's state history to reproduce an intermittent bug.
- Inspect your Redux store's data shape in the browser without adding console.log statements everywhere.