# Redux DevTools — Time-Travel Debugging for State Management

> Redux DevTools is a browser extension and standalone app for inspecting, replaying, and debugging Redux state changes in JavaScript applications.

## Install

Save in your project root:

# Redux DevTools — Time-Travel Debugging for State Management

## Quick Use
```bash
# Install the npm package for your app
npm install --save-dev @redux-devtools/extension
```
```js
// In your store setup
import { composeWithDevTools } from "@redux-devtools/extension";
const store = createStore(reducer, composeWithDevTools());
```

## Introduction
Redux DevTools provides a browser extension and standalone Electron app that lets developers inspect every dispatched action, view state diffs, and time-travel through state history. It is the standard debugging companion for any Redux-based application.

## What Redux DevTools Does
- Records every dispatched action with its payload and timestamp
- Displays before/after state diffs for each action
- Enables time-travel debugging by replaying or skipping individual actions
- Supports importing and exporting action logs for reproducible bug reports
- Provides a chart view for visualizing state tree structure

## Architecture Overview
The extension injects a bridge into the page context that intercepts the Redux store's dispatch pipeline via middleware or store enhancers. Actions and state snapshots are serialized and sent to the DevTools panel over a messaging channel. The panel UI is a React app that renders the action log, state tree, diff view, and chart. A remote monitor protocol allows standalone apps and server-side Redux instances to connect as well.

## Self-Hosting & Configuration
- Install the browser extension from the Chrome Web Store or Firefox Add-ons
- Wrap your store creation with `composeWithDevTools()` or use the `__REDUX_DEVTOOLS_EXTENSION__` global
- Configure action sanitizers to redact sensitive data from logs
- Set `maxAge` to limit the number of stored actions and reduce memory usage
- Use `@redux-devtools/remote` for debugging Node.js or React Native stores

## Key Features
- Time-travel: jump to any point in action history instantly
- Action filtering: search and filter actions by type or payload content
- Persist state: keep the state tree across page reloads during development
- Lock/unlock: pause recording to isolate specific state transitions
- Custom monitors: plug in community monitors or build your own panel view

## Comparison with Similar Tools
- **React DevTools** — Focuses on component tree and props; Redux DevTools focuses on global state flow
- **MobX DevTools** — Tracks MobX observable mutations; Redux DevTools tracks action-based dispatch
- **Zustand DevTools** — Uses Redux DevTools protocol under the hood for Zustand stores
- **Vue DevTools** — Vue-specific; Redux DevTools is framework-agnostic for any Redux store

## FAQ
**Q: Does it work with Redux Toolkit?**
A: Yes. Redux Toolkit's `configureStore` enables DevTools integration by default in development mode.

**Q: Does it affect production performance?**
A: The extension only activates when the DevTools panel is open. In production builds, omit the enhancer or use `composeWithDevTools({ trace: false })`.

**Q: Can I debug server-side Redux stores?**
A: Yes. Use the remote monitoring package to connect headless Redux instances to a standalone DevTools app.

**Q: Does it support non-Redux state managers?**
A: Any library that implements the DevTools extension protocol can connect. Zustand and some other libraries support it natively.

## Sources
- https://github.com/reduxjs/redux-devtools
- https://redux.js.org/usage/configuring-your-store#integrating-the-devtools-extension

---
Source: https://tokrepo.com/en/workflows/asset-42f87300
Author: AI Open Source