redux-logger

Redux Logger is a small add-on for JavaScript web applications that use a state management library called Redux. Redux is a system for keeping track of all the data in an app, and every change to that data is triggered by something called an "action". This tool sits in the middle of that process and prints each action to the browser's developer console as it happens, showing what the app's data looked like before the action, what the action itself contained, and what the data looked like after.

The main use case is debugging during development. When something goes wrong in a Redux-powered app, a developer can open the browser console and see a color-coded log of every action that fired, including timestamps and how long each action took to process. This makes it much easier to trace the source of a bug than reading through raw code.

Installing it takes one line: npm i redux-logger. Plugging it into an existing Redux app requires two or three lines of code to register it as middleware. A default export covers most cases, but developers can also create a custom logger instance with options to filter which actions get logged, collapse repeated entries, show only changes between states, transform how state or actions appear in the log, and control color schemes.

The library also supports a "diff" mode (marked as alpha in the README) that highlights exactly which parts of the app's data changed between two actions, rather than printing the full state both times.

Maintained by LogRocket, a separate commercial product for recording and replaying user sessions in production. The logger itself is a free, standalone open-source tool and does not require a LogRocket account.