DevTools and Debugging
DevTools for Redux with hot reloading, action replay, and customizable UI
Redux DevTools Extension
Browser extension to show DevTools UI in separate browser windows rather than in-page (currently Chrome only)
Remote Redux DevTools
Use Redux DevTools remotely for React Native, hybrid, desktop and server side Redux apps.
Control, monitor, and instrument your React DOM and React Native apps. From the comfort of your TTY.
A dock that lets you view you components props and state without putting debuggers and console.logs all over the place. Inspired by redux-devtools.
Saga monitor and UI devtool for redux-saga.
A Chrome developer tool that provides a new tab that actively logs and visualizes the Redux data flow, enabling easier, faster debugging of any React-Redux implementation.
Redux DevTools Instrumentation
Redux enhancer used along with Redux DevTools or Remote Redux DevTools.
Visualization tool for React component trees, with support for Fiber, React-Router v4, and Redux
Inspecting / time travelling state changes of a React component on the Redux DevTools Extension or React Native Debugger
A simple CLI tool to view the graph of events and actions based on parsing specific documentation comments.
Debugging tools for Reselect. Check selector dependencies, inputs, outputs, and recomputations at any time. Output a JSON representation of your selector graph. Tools include a library and a Chrome browser extension.
A browser devtools extension that can show events and changes from many sources, including Redux stores, Redux-Saga, Vue, Angular, MobX, DOM elements,a nd many more
The default monitor for Redux DevTools with a tree view
A resizable and movable container for other monitors.
A state monitor that provides a convenient way to inspect "real world" app states that could be complicated and deeply nested, by pinning keys of interest and showing state diffs.
The primary goal of this monitor is to highlight the changes to an application's state from action to action.
Filterable Log Monitor
Filterable tree view monitor for Redux DevTools. Actions are collapsed by default but they can be expanded by clicking on the action type. Strings and regular expressions can be used to filter actions by type as well as to filter the state tree by nodes or values.
A chart monitor for Redux DevTools. It shows a real-time view of the store aka the current state of the app.
Uses a slider based on react-slider to slide between different recorded actions. It also features play/pause/step-through.
A monitor that lets you manually dispatch actions to see how the app reacts.
Import Export Monitor
A simple monitor for Redux DevTools that enables exporting, then importing the serialized state of a Redux application. It looks like a prompt() modal, but without the character limit.
Integrate multiple monitors to your redux devtools.
Redux DevTools Clipboard
Dispatch your actions manually to test if your app reacts well.
Redux DevTools Profiler Monitor
A custom monitor for Redux DevTools to profile a given action in Chrome DevTools
In-depth monitoring for Redux applications. View actions on a timeline, group by type, and more.
A monitor for Redux DevTools to enable uploading and downloading of serialized application states. Pairs well with Redux Slider Slider Monitor! This is a re-implementation of Redux Import Export Monitor, with the goal being to work well with very large application states.
Redux middleware that logs state diffs after actions are dispatched.
Just a logger middleware for redux that will write all redux actions and state changes to the node console. Entirely based on redux-logger
Diff logger between states for redux
debug() as redux middleware. Similar to redux-logger, but works both on the server and in the client.
Redux middleware for sending error reports to Sentry through raven-js.
Redux performance middleware, Measure the time that the actions need to change the state
Simple log of redux actions, good for testing.
Warn about slow reducers used in your redux app
This middleware tracks a trail of actions of a user interacting with an application. This trail may be posted to a development server and replayed in development mode.
Redux State History
Redux store enhancers / component for tracking and visualizing state changes & debugging remote sessions. Inspired by the redux devtools and redux slider monitor, this package provides state recording/playback (i.e. "time travel") abilities for redux applications.
redux store enhancer to log errors while dispatching
mole-redux is a tiny helper library that works as a middleware for redux, allowing easy state-action molejs. Underneath, it uses the report() method from mole-reporter one of the three independent packages that form the whole molejs service stack.
Error catcher middleware for Redux reducers and middlewares.
Log Redux Actions in realtime to an electron app for separate browser viewing
A bug reporter and bug playback tool for redux. Includes easy bug reporting, logging of state, redaction of sensitive information, easy bug playback, and more.
Super simple cli logger middleware for redux
Middleware for storing redux actions in localstorage and replaying them later. Usefull for QA reproducing bugs etc.
Redux TrackJS Action Logger
Logs user actions to TrackJS so you can replay them later.
A Redux devtool that lets you replay user sessions in real-time.
Redux middleware that wraps exceptions in actions and sends them to Bugsnag with current state
A redux store enhancer which allows you to record the redux action history and access it. It can be configured to have a maximum number of actions to keep in the history. Early actions will be removed from the history, and the redux state of the beginning of the history will be recorded.
Redux middleware that logs to Bugsnag
Record and replay user actions from Redux.
A simple redux middleware that logs changes to the state after every action.
A logging middleware that shows action and state contents as console tables
Logs all dispatched actions to Raven as "breadcrumbs" and attaches your current Redux store as additional context. Inspired by redux-raven-middleware but with a slightly different approach.
Redux middleware for Airbrake error logging
A simple, extensible redux middleware system to generate logs from actions. The intent of this library is to make logging and event reporting as simple and consistent as possible.
Adds logging of dispatched actions to your reducer functionality storing dispatched actions in the reducer's store.
A middleware for Redux providing a heartbeat that contains batched log of actions occurring between each beat. Created for incrementally collecting usage data for driving analytics, contextual error reporting, even persisting replayable user sessions.
Attaches a lightweight object to window which tracks request history as a tree and provides a simple interface for tracking actions going out through redux-api-middleware or internally.
Record the time consumed by each asynchronous action, asynchronous solutions that rely on redux-promise-middleware.
A set of devtools to help debug reselect selectors by logging changes.
Replay your redux actions in your application through Puppeteer. Useful for renderer metrics and screenshots.
redux-logdown is a tiny logger library for Redux written with logdown that supports localStorage.debug for enabling/disabling store logging.
This library tracks the way your app is using the data in your Redux store. By setting up the monitor in devtools you can see a live view of when different parts of your store are accessed
Redux middleware that detects mutations between and outside redux dispatches. For development use only.
Use freezeState with your reducer to find spots in your app where you are mutating state. It is not recommended to use this in production as it recursively freezes objects and could affect performance.
Redux middleware that prevents state from being mutated anywhere in the app. When mutation occurs, an error will be thrown by the runtime. This is useful during development mode to ensure that no part of the app accidentally mutates the state.
Redux middleware that freezes store state after each update.
A shallow-equality comparison function and wrapper for
connectthat will warn if a
mapStatefunction accidentally mutates values. Used by AirBnB internally.
A library that uses ES6 Proxies to help detect accidental mutations
Check and log whether react-redux's connect method is passed methods that create impure props. Built on top of lelandrichardson's gist for ensuring purity on mapStateToProps and other methods passed to connect.
A tiny, tiny library that adds customizable immutability to Redux. It does this by using freeze-tag to enhance the reducer(s) you use to create your Redux store.
Linting and Validation
Also see the Mutation Detection section just above.
redux-ensure-fsa provides a middleware function to use as part of the redux dispatch chain. It is intended for use in development only to check that all actions at the end of the chain follow the Flux Standard Action protocol.
Redux middleware that validates incoming actions with Flux Standard Action.
Redux middleware that logs an error to the console when an action is fired and the state is not mutated
A Redux middleware that can check your redux action's property types against a provided specification of expected property types.
Action parameter validator middleware for redux
Handle uncaught promises returned from dispatch.
Lets you run validations against parts of your state or against the action that was dispatched.
A redux middleware that detects duplicate actions & shows this in the console
JSON Schema middleware for Redux. Validates dispatched actions.
Validate action properties
Validate that actions match the Flux Standard Action definition
A small tool to automatically validate redux actions based on a predicate and log wrongly formatted actions into console
Action parameter validator middleware for redux
Async friendly validation middleware for Redux
Redux middleware for FSA payload validation.
Extensible class to validate Redux/Flux action properties and ensure consistency across large projects.
Component Update Monitoring
React Render Visualizer
A component mixin that overlays a tooltip indicating when a component has re-rendered and why, as well as animating the component's outline.
A react-transform version of the render visualizer. Transforms all React components by default, but also offers a second transform that can be used to only modify components with a
static rerenderViz = trueattribute on the component class.
The article contains a useful props-diffing mixin that logs change information to the console.
A development replacement for shouldComponentUpdate that gives you the "why?"
Puts your console on blast when React is making unnecessary updates. Inspired by Benchling's mixin, but monkey-patches React instead.
ReactPerfTool tries to give you a more visual way of debugging performance of your React application. It does this by using the addons delivered by the React team and community to get measurements and visualize this using graphs. This makes it easier to spot bottlenecks.
React Monocle is a developer tool for generating visual representations of your React app's component hierarchy.
lcHOC is a HOC (higher order component) in React that visualize rendering and logs helpful information. Enhance each component you want to study with lcHOC and every time that component updates, a green flash wraps the component (much like paint flashing in devtools) and debugging information is logged to the console.
A utility that detects wasted rendering time on incorrectly developed Pure Components
A component render time benchmarking suite for React
A component to help benchmark React components and their trees. This project aims to provide a method for gathering benchmarks of component tree mount, update, and unmount timings.
A CLI React performance optimization tool that identifies potential unnecessary re-rendering.
A function that returns an object explaining the difference (instead of the usual boolean). Useful for debugging React