redux-logger vs redux-devtools-extension vs @ngrx/store-devtools vs react-devtools
State Management Debugging Tools Comparison
1 Year
redux-loggerredux-devtools-extension@ngrx/store-devtoolsreact-devtoolsSimilar Packages:
What's State Management Debugging Tools?

State management debugging tools are essential for developers working with complex applications that utilize state management libraries. These tools provide insights into the state changes, actions dispatched, and the overall flow of data within the application. They help developers track down bugs, optimize performance, and understand how state transitions occur in real-time, making the development process more efficient and less error-prone.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
redux-logger871,2085,752-598 years agoMIT
redux-devtools-extension809,65213,495-2654 years agoMIT
@ngrx/store-devtools603,0788,156437 kB6614 days agoMIT
react-devtools90,121234,57224.5 kB9812 months agoMIT
Feature Comparison: redux-logger vs redux-devtools-extension vs @ngrx/store-devtools vs react-devtools

Integration

  • redux-logger:

    redux-logger is a middleware that logs actions and state changes to the console, making it easy to integrate into any Redux application without additional setup.

  • redux-devtools-extension:

    redux-devtools-extension can be used with any JavaScript application that utilizes Redux, making it a flexible choice for developers working across different frameworks, including React and Angular.

  • @ngrx/store-devtools:

    @ngrx/store-devtools is specifically designed for Angular applications using NgRx, providing deep integration with Angular's change detection and lifecycle hooks, making it highly effective for Angular developers.

  • react-devtools:

    react-devtools is tailored for React applications, allowing developers to inspect and debug React components directly in the browser, providing a seamless experience for React developers.

Debugging Features

  • redux-logger:

    redux-logger logs every action dispatched and the resulting state changes to the console, providing a straightforward way to track what happens in your Redux store.

  • redux-devtools-extension:

    redux-devtools-extension includes features like action logging, state inspection, and the ability to revert to previous states, making it a powerful tool for understanding the flow of data in Redux applications.

  • @ngrx/store-devtools:

    @ngrx/store-devtools offers advanced debugging features such as time-travel debugging, allowing developers to step back and forth through state changes, and a state snapshot feature that lets you inspect the state at any point in time.

  • react-devtools:

    react-devtools provides a component tree view, allowing developers to inspect the hierarchy of components, view their props and state, and track re-renders, which is crucial for optimizing performance and debugging issues.

Performance Impact

  • redux-logger:

    redux-logger is lightweight and has a negligible performance impact, making it suitable for both development and production environments, although it is primarily used during development.

  • redux-devtools-extension:

    redux-devtools-extension can impact performance when logging a large number of actions or when the state is very large. It is advisable to limit its use in production environments to avoid unnecessary overhead.

  • @ngrx/store-devtools:

    Using @ngrx/store-devtools can introduce some overhead, especially in production environments. It is recommended to disable it in production to avoid performance degradation while still benefiting from its features during development.

  • react-devtools:

    react-devtools has minimal impact on performance, but extensive use of the profiler can slow down the application during debugging sessions. It is best used during development rather than in production.

Learning Curve

  • redux-logger:

    redux-logger is simple to implement and requires minimal learning, making it accessible for developers new to Redux.

  • redux-devtools-extension:

    redux-devtools-extension is relatively easy to set up and use for developers familiar with Redux, but may require some understanding of Redux concepts for effective debugging.

  • @ngrx/store-devtools:

    @ngrx/store-devtools is straightforward for developers familiar with NgRx and Angular, but may require some learning for those new to the NgRx ecosystem due to its specific patterns and practices.

  • react-devtools:

    react-devtools is easy to learn for developers already working with React, as it integrates directly into the React development workflow, providing intuitive tools for debugging.

Community and Support

  • redux-logger:

    redux-logger is a popular choice among Redux developers, with good community support and documentation available, making it easy to find help and best practices.

  • redux-devtools-extension:

    redux-devtools-extension is widely used in the Redux community, with ample resources, documentation, and community support to assist developers in troubleshooting and optimizing their applications.

  • @ngrx/store-devtools:

    @ngrx/store-devtools has strong community support within the Angular ecosystem, with extensive documentation and resources available for developers.

  • react-devtools:

    react-devtools benefits from a large and active community of React developers, ensuring a wealth of tutorials, documentation, and support resources are available.

How to Choose: redux-logger vs redux-devtools-extension vs @ngrx/store-devtools vs react-devtools
  • redux-logger:

    Use redux-logger if you want a simple middleware to log Redux actions and state changes to the console. It is lightweight and easy to integrate, making it suitable for quick debugging without the need for a full-fledged debugging tool.

  • redux-devtools-extension:

    Opt for redux-devtools-extension if you are using Redux for state management in any JavaScript application, including React, Angular, or Vue. This extension provides a rich set of features for inspecting Redux state changes, dispatching actions, and time-travel debugging, making it versatile across frameworks.

  • @ngrx/store-devtools:

    Choose @ngrx/store-devtools if you are using Angular with NgRx for state management. It integrates seamlessly with the Angular ecosystem and provides powerful debugging capabilities tailored for Angular applications, including time-travel debugging and state inspection.

  • react-devtools:

    Select react-devtools if you are working with React applications. This tool allows you to inspect the React component hierarchy, view props and state, and track component re-renders, making it ideal for debugging React-specific issues.

README for redux-logger

Logger for Redux

npm npm Build Status

redux-logger

Table of contents

Install

npm i --save redux-logger

Usage

import { applyMiddleware, createStore } from 'redux';

// Logger with default options
import logger from 'redux-logger'
const store = createStore(
  reducer,
  applyMiddleware(logger)
)

// Note passing middleware as the third argument requires redux@>=3.1.0

Or you can create your own logger with custom options:

import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger'

const logger = createLogger({
  // ...options
});

const store = createStore(
  reducer,
  applyMiddleware(logger)
);

Note: logger must be the last middleware in chain, otherwise it will log thunk and promise, not actual actions (#20).

Options

{
  predicate, // if specified this function will be called before each action is processed with this middleware.
  collapsed, // takes a Boolean or optionally a Function that receives `getState` function for accessing current store state and `action` object as parameters. Returns `true` if the log group should be collapsed, `false` otherwise.
  duration = false: Boolean, // print the duration of each action?
  timestamp = true: Boolean, // print the timestamp with each action?

  level = 'log': 'log' | 'console' | 'warn' | 'error' | 'info', // console's level
  colors: ColorsObject, // colors for title, prev state, action and next state: https://github.com/evgenyrodionov/redux-logger/blob/master/src/defaults.js#L12-L18
  titleFormatter, // Format the title used when logging actions.

  stateTransformer, // Transform state before print. Eg. convert Immutable object to plain JSON.
  actionTransformer, // Transform action before print. Eg. convert Immutable object to plain JSON.
  errorTransformer, // Transform error before print. Eg. convert Immutable object to plain JSON.

  logger = console: LoggerObject, // implementation of the `console` API.
  logErrors = true: Boolean, // should the logger catch, log, and re-throw errors?

  diff = false: Boolean, // (alpha) show diff between states?
  diffPredicate // (alpha) filter function for showing states diff, similar to `predicate`
}

Options description

level (String | Function | Object)

Level of console. warn, error, info or else.

It can be a function (action: Object) => level: String.

It can be an object with level string for: prevState, action, nextState, error

It can be an object with getter functions: prevState, action, nextState, error. Useful if you want to print message based on specific state or action. Set any of them to false if you want to hide it.

  • prevState(prevState: Object) => level: String
  • action(action: Object) => level: String
  • nextState(nextState: Object) => level: String
  • error(error: Any, prevState: Object) => level: String

Default: log

duration (Boolean)

Print duration of each action?

Default: false

timestamp (Boolean)

Print timestamp with each action?

Default: true

colors (Object)

Object with color getter functions: title, prevState, action, nextState, error. Useful if you want to paint message based on specific state or action. Set any of them to false if you want to show plain message without colors.

  • title(action: Object) => color: String
  • prevState(prevState: Object) => color: String
  • action(action: Object) => color: String
  • nextState(nextState: Object) => color: String
  • error(error: Any, prevState: Object) => color: String

logger (Object)

Implementation of the console API. Useful if you are using a custom, wrapped version of console.

Default: console

logErrors (Boolean)

Should the logger catch, log, and re-throw errors? This makes it clear which action triggered the error but makes "break on error" in dev tools harder to use, as it breaks on re-throw rather than the original throw location.

Default: true

collapsed = (getState: Function, action: Object, logEntry: Object) => Boolean

Takes a boolean or optionally a function that receives getState function for accessing current store state and action object as parameters. Returns true if the log group should be collapsed, false otherwise.

Default: false

predicate = (getState: Function, action: Object) => Boolean

If specified this function will be called before each action is processed with this middleware. Receives getState function for accessing current store state and action object as parameters. Returns true if action should be logged, false otherwise.

Default: null (always log)

stateTransformer = (state: Object) => state

Transform state before print. Eg. convert Immutable object to plain JSON.

Default: identity function

actionTransformer = (action: Object) => action

Transform action before print. Eg. convert Immutable object to plain JSON.

Default: identity function

errorTransformer = (error: Any) => error

Transform error before print.

Default: identity function

titleFormatter = (action: Object, time: String?, took: Number?) => title

Format the title used for each action.

Default: prints something like action @ ${time} ${action.type} (in ${took.toFixed(2)} ms)

diff (Boolean)

Show states diff.

Default: false

diffPredicate = (getState: Function, action: Object) => Boolean

Filter states diff for certain cases.

Default: undefined

Recipes

Log only in development

const middlewares = [];

if (process.env.NODE_ENV === `development`) {
  const { logger } = require(`redux-logger`);

  middlewares.push(logger);
}

const store = compose(applyMiddleware(...middlewares))(createStore)(reducer);

Log everything except actions with certain type

createLogger({
  predicate: (getState, action) => action.type !== AUTH_REMOVE_TOKEN
});

Collapse actions with certain type

createLogger({
  collapsed: (getState, action) => action.type === FORM_CHANGE
});

Collapse actions that don't have errors

createLogger({
  collapsed: (getState, action, logEntry) => !logEntry.error
});

Transform Immutable (without combineReducers)

import { Iterable } from 'immutable';

const stateTransformer = (state) => {
  if (Iterable.isIterable(state)) return state.toJS();
  else return state;
};

const logger = createLogger({
  stateTransformer,
});

Transform Immutable (with combineReducers)

const logger = createLogger({
  stateTransformer: (state) => {
    let newState = {};

    for (var i of Object.keys(state)) {
      if (Immutable.Iterable.isIterable(state[i])) {
        newState[i] = state[i].toJS();
      } else {
        newState[i] = state[i];
      }
    };

    return newState;
  }
});

Log batched actions

Thanks to @smashercosmo

import { createLogger } from 'redux-logger';

const actionTransformer = action => {
  if (action.type === 'BATCHING_REDUCER.BATCH') {
    action.payload.type = action.payload.map(next => next.type).join(' => ');
    return action.payload;
  }

  return action;
};

const level = 'info';

const logger = {};

for (const method in console) {
  if (typeof console[method] === 'function') {
    logger[method] = console[method].bind(console);
  }
}

logger[level] = function levelFn(...args) {
  const lastArg = args.pop();

  if (Array.isArray(lastArg)) {
    return lastArg.forEach(item => {
      console[level].apply(console, [...args, item]);
    });
  }

  console[level].apply(console, arguments);
};

export default createLogger({
  level,
  actionTransformer,
  logger
});

To Do

  • [x] Update eslint config to airbnb's
  • [ ] Clean up code, because it's very messy, to be honest
  • [ ] Write tests
  • [ ] Node.js support
  • [ ] React-native support

Feel free to create PR for any of those tasks!

Known issues

  • Performance issues in react-native (#32)

License

MIT