The default monitor for Redux DevTools with a tree view

Overview

Redux DevTools Log Monitor

The default monitor for Redux DevTools with a tree view.
It shows a log of states and actions, and lets you change their history.

Installation

npm install --save-dev redux-devtools-log-monitor

Usage

You can use LogMonitor as the only monitor in your app:

containers/DevTools.js
import React from 'react';
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';

export default createDevTools(
  <LogMonitor />
);

Then you can render <DevTools> to any place inside app or even into a separate popup window.

Alternative, you can use it together with DockMonitor to make it dockable.
Consult the DockMonitor README for details of this approach.

Read how to start using Redux DevTools.

Features

Every action is displayed in the log. You can expand the tree view to inspect the action object and the state after it.

If a reducer throws while handling an action, you will see “Interrupted by an error up the chain” instead of the state and action tree view. Scroll up until you find the action which caused the error. You will see the error message in the action log entry. If you use a hot reloading tool, you can edit the reducer, and the error will automatically update or go away.

Clicking an action will disable it. It will appear crossed out, and the state will be recalculated as if the action never happened. Clicking it once again will enable it back. Use this together with a hot reloading solution to work sequentially on different states of your app without reproducing them by hand. You can toggle any action except for the initial one.

There are four buttons at the very top. “Reset” takes your app to the state you created the store with. The other three buttons work together. You might find it useful to think of them like you think of Git commits. “Commit” removes all actions in your log, and makes the current state your initial state. This is useful when you start working on a feature and want to remove the previous noise. After you’ve dispatched a few actions, you can press “Revert” to go back to the last committed state. Finally, if you dispatched some actions by mistake and you don’t want them around, you can toggle them by clicking on them, and press “Sweep” to completely remove all currently disabled actions from the log.

Props

Name Description
theme Either a string referring to one of the themes provided by redux-devtools-themes (feel free to contribute!) or a custom object of the same format. Optional. By default, set to 'nicinabox'.
select A function that selects the slice of the state for DevTools to show. For example, state => state.thePart.iCare.about. Optional. By default, set to state => state.
preserveScrollTop When true, records the current scroll top every second so it can be restored on refresh. This only has effect when used together with persistState() enhancer from Redux DevTools. By default, set to true.
expandActionRoot When true, displays the action object expanded rather than collapsed. By default, set to true.
expandStateRoot When true, displays the state object expanded rather than collapsed. By default, set to true.
markStateDiff When true, mark the state's values which were changed comparing to the previous state. It affects the performance significantly! You might also want to set expandStateRoot to true as well when enabling it. By default, set to false.
hideMainButtons When true, will show only the logs without the top button bar. By default, set to false.

License

MIT

Issues
  • Added shift toggle

    Added shift toggle

    opened by khankuan 22
  • Sort state keys alphabetically

    Sort state keys alphabetically

    Can we add ability to show state keys in alphabetical order?

    opened by Mistereo 16
  • redux store.subscribe is firing repeatedly once I use log monitor.

    redux store.subscribe is firing repeatedly once I use log monitor.

    I have a redux store.subscribe that fires the function its past about once a second once I start using the LogMonitor. The project is very tiny with one reducer with 3 actions and only 3 components. I can console all the actions and know I'm not spamming it. Is this normal behavior? It's totally possible I'm blaming the wrong library but this seems to be the point at which the problem is starting.

    opened by aintnorest 13
  • React 16

    React 16

    Hey there. Does this tool work with react 16? I have issues like :

    warning.js:33 Warning: Expected `onClick` listener to be a function, instead got a value of `boolean` type.
        in label (created by JSONNestedNode)
        in li (created by JSONNestedNode)
        in JSONNestedNode (created by JSONObjectNode)
        in JSONObjectNode (created by JSONNode)
        in JSONNode (created by JSONNestedNode)
        in ul (created by JSONNestedNode)
        in li (created by JSONNestedNode)
        in JSONNestedNode (created by JSONObjectNode)
        in JSONObjectNode (created by JSONNode)
        in JSONNode (created by JSONTree)
        in ul (created by JSONTree)
        in JSONTree (created by LogMonitorEntry)
        in div (created by LogMonitorEntry)
        in div (created by LogMonitorEntry)
        in LogMonitorEntry (created by LogMonitorEntryList)
        in div (created by LogMonitorEntryList)
        in LogMonitorEntryList (created by LogMonitor)
        in div (created by LogMonitor)
        in div (created by LogMonitor)
        in LogMonitor
        in FilterMonitor
        in div (created by Dock)
        in div (created by Dock)
        in div (created by Dock)
        in Dock (created by DockMonitor)
        in DockMonitor (created by Connect(DockMonitor))
        in Connect(DockMonitor) (created by DevTools)
        in DevTools (created by Root)
        in div (created by Root)
        in MuiThemeProvider (created by Root)
        in Provider (created by Root)
        in Root
        in AppContainer
    
    opened by GuillaumeCisco 10
  • Ability to transform actions/state similar to fcomb/redux-logger

    Ability to transform actions/state similar to fcomb/redux-logger

    When using Symbols as action types, LogMonitor can't show the type anymore. I get around this in redux-logger using their actionTransformer parameter. This PR implements the same transform api here for actions/state.

    I'm not sure if mutations to the actions / computedState are allowed or not.

    opened by samiskin 7
  • Style gets messed up after a few actions

    Style gets messed up after a few actions

    I have no idea why this is happening. I'm using redux in the Firefox debugger and I just integrated the latest (3.0.0) redux-devtools, and it looks like this:

    0cd98007-ceb8-425a-a306-a6358aaaac07

    I fixed that undefined that we were seeing earlier. I'm rendering it like this:

        const win = window.open(
          'data:text/html,<!DOCTYPE html><html style="height:100%"><body style="height:100%;margin:0"></body></html>',
          "redux-devtools",
          "menubar=no,location=no,resizable=yes,scrollbars=no,status=no"
        );
    
        // Install the devtools. Timeout just to be sure (just for testing)
        setTimeout(() => {
          React.render(
            React.createElement(
              Provider, { store: store },
              React.createElement(reduxDevTools)
            ),
            win.document.body
          );
        }, 500);
    
    opened by jlongster 6
  • Update react-json-tree version in package.json

    Update react-json-tree version in package.json

    We recently installed redux-dev-tools and wanted to always have the state collapsed to start as we have over 150 keys. We implemented the props as expected, and the internal code to this app seemed to be passing everything correctly to react-json-tree.

    Our implementation of the props to collapse the tree:

    <LogMonitor
      expandActionRoot={false}
      expandStateRoot={false}
      theme="monokai"
    />
    

    It always stayed expanded for some reason. I researched the version of react-json-tree being used and my project said it had "react-json-tree": "^0.6.6".

    However, the npm registry has the latest version of react-json-tree at version 0.10.0.

    After updating to version 0.10.0, the expandActionRoot and expandStateRoot works brilliantly.

    log-monitor-collapsed
    opened by m2mathew 6
  • React-Native Transform Error - Preset

    React-Native Transform Error - Preset "es2015-loose"

    I have a new React native project. I am using [email protected], [email protected], [email protected], [email protected] and [email protected]. Everything compiled fine when calling react-native run-ios until I added this redux-devtools-log-monitor library. Now, I get the following error in Packager:

    [12:48:31 PM] <START> transform
    transforming [====================================    ] 89% 685/769 Error while persisting cache: TransformError: /<path>/node_modules/redux-devtools-log-monitor/lib/index.js: Couldn't find preset "es2015-loose" relative to directory "/<path>/node_modules/redux-devtools-log-monitor"
    

    Any suggestions?

    PS: <path> in the error above is obviously the full path to the project that I removed...

    opened by paulxtiseo 6
  • Add expandActionRoot/expandStateRoot props

    Add expandActionRoot/expandStateRoot props

    As mentioned in #9, it would be nice to have ability to set action/state roots in JSON tree to collapsed/not expanded via props.

    react-json-tree takes additional expandRoot prop from v0.3.0, so this is fairly easy.

    I added two new props to LogMonitor, expandActionRoot and expandStateRoot that are set to true by default, but can be explicitly set to false.

    Since collapsed prop name was already taken and refers to LogMonitorEntry, I decided to name them similar to react-json-tree prop name. I think they are less ambiguous.

    opened by romanmatiasko 6
  • React v16 warning

    React v16 warning

    In react v16.12 has warning: Warning: componentWillReceiveProps has been renamed, and is not recommended for use. ... Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ... Please update the following components: Dock, JSONNestedNode, JSONTree, LogMonitor

    opened by koalex 1
  • Warning: Expected `onClick` listener to be a function, instead got `false`.

    Warning: Expected `onClick` listener to be a function, instead got `false`.

    In using the <LogMonitor /> component, I am getting warnings about a prop used in the module.

    Warning: Expected `onClick` listener to be a function, instead got `false`.
    
    If you used to conditionally omit it with onClick={condition && value}, pass onClick={condition ? value : undefined} instead.
        in span (created by JSONNestedNode)
        in li (created by JSONNestedNode)
        in JSONNestedNode (created by JSONObjectNode)
        in JSONObjectNode (created by JSONNode)
        in JSONNode (created by JSONNestedNode)
        in ul (created by JSONNestedNode)
        in li (created by JSONNestedNode)
        in JSONNestedNode (created by JSONObjectNode)
        in JSONObjectNode (created by JSONNode)
        in JSONNode (created by JSONTree)
        in ul (created by JSONTree)
        in JSONTree (created by LogMonitorEntry)
        in div (created by LogMonitorEntry)
        in div (created by LogMonitorEntry)
        in LogMonitorEntry (created by LogMonitorEntryList)
        in div (created by LogMonitorEntryList)
        in LogMonitorEntryList (created by LogMonitor)
        in div (created by LogMonitor)
        in div (created by LogMonitor)
        in LogMonitor (at DevTools.jsx:12)
        in div (created by Dock)
        in div (created by Dock)
        in div (created by Dock)
        in Dock (created by DockMonitor)
        in DockMonitor (created by Connect(DockMonitor))
        in Connect(DockMonitor) (created by DevTools)
        in DevTools (at App.dev.jsx:37)
        in div (at App.dev.jsx:27)
        in Provider (at App.dev.jsx:26)
        in App (at index.js:28)
        in ErrorBoundary (at index.js:27)
        in MuiThemeProvider (at index.js:26)
        in Router (created by HashRouter)
        in HashRouter (at index.js:25)
    

    Here is my usage:

    import React from 'react';
    import { createDevTools } from 'redux-devtools';
    import LogMonitor from 'redux-devtools-log-monitor';
    import DockMonitor from 'redux-devtools-dock-monitor';
    
    export default createDevTools(
      <DockMonitor
        changePositionKey="ctrl-w"
        defaultIsVisible={false}
        toggleVisibilityKey="ctrl-h"
      >
        <LogMonitor />
      </DockMonitor>
    );
    

    my module versions:

        "react": "^16.3.0",
        "redux-devtools": "^3.4.0",
        "redux-devtools-dock-monitor": "^1.1.3",
        "redux-devtools-log-monitor": "^1.3.0",
    

    How do I fix this behavior? It is making the console very noisy

    opened by oshikryu 2
  • Should be import debounce from 'lodash/debounce';

    Should be import debounce from 'lodash/debounce';

    The file line: https://github.com/gaearon/redux-devtools-log-monitor/blob/master/src/LogMonitor.js#L10

    import debounce from 'lodash.debounce';
    

    Should be:

    import debounce from 'lodash/debounce';
    

    So that not load the whole lodash library.

    (Because I want logger be included in production mode with a switch to turn on or off)

    opened by xpol 0
  • Commit -> Clear

    Commit -> Clear

    opened by PatrickJS 0
  • Needs a feature to copy/paste or download the current state object

    Needs a feature to copy/paste or download the current state object

    I've had a few situations where it would be really convenient for me to get a copy of just the current state object either saved to a pretty-printed JSON file or copied to the clipboard. The existing download button is similar, but since it downloads actions and computed state, I have to shave a few more yaks to get a clean copy of the state object.

    The current best solution I have is to use react-devtools to select my <Provider/> component and then paste JSON.stringify($r.store.getState()) into the console. This works, but requires multiple unintuitive clicks, remembering or finding that code snippet, and then formatting the output.

    Since this is something I run into often, it would reduce a lot of friction to have a more streamlined solution, like a "Copy current state to Clipboard" button somewhere in the UI. Another user suggested being able to copy the contents of the log monitor panel just by clicking and dragging, which is another potential solution that would work for this use case.

    I'm more than happy to open a PR for this and implement the feature, but before I spend a lot of time on it, I just wanted to check whether or not this is a feature you'd be interested in merging, and if you have any thoughts about the design of the UI/UX for this feature.

    opened by localjo 6
  • [issue #1] Add density props

    [issue #1] Add density props

    this would be an implementation to solve #1

    • for <LogMonitor /> the default should look like: screen shot 2016-04-06 at 6 33 29 pm
    • for <LogMonitor density={'cozy'} /> should look like: screen shot 2016-04-06 at 6 34 47 pm
    • for <LogMonitor density={'compact'} /> should look like: screen shot 2016-04-06 at 6 48 10 pm
    • for <LogMonitor density={'comfortable'} /> should look like: screen shot 2016-04-06 at 6 34 14 pm

    Let me know your comments I would be happy to make fixes on this

    opened by lucas-aragno 0
  • Adds redux store log import and export functionality

    Adds redux store log import and export functionality

    -Adds import and export functionality to the log monitor -Start the discussion on where to store the redux store log information. Currently the log information is stored in localstorage for the initial conversation.

    opened by phamcharles 12
  • Optimize performance!

    Optimize performance!

    This project is ripe for performance optimizations. There’s a ton of low hanging fruit here. I think we can get 10x better performance if somebody just spends a day with ReactPerf and finds where all the wasted renders are coming from, and optimizes allocations from inline styles that almost never change. Any volunteers?

    Guide to optimizing React performance: http://benchling.engineering/deep-dive-react-perf-debugging/

    help wanted 
    opened by gaearon 12
  • Make density configurable

    Make density configurable

    Like Gmail, we should offer a density=(comfortable|cozy|compact) prop that configures margins and paddings. This would solve https://github.com/gaearon/redux-devtools/issues/153.

    enhancement help wanted 
    opened by gaearon 0
Releases(v1.3.0)
  • v1.3.0(Apr 25, 2017)

  • v1.2.0(Jan 4, 2017)

    • Shift toggle - hold shift key to toggle multiple actions (#47) .
    • Hide button bar - set hideMainButtons prop to true to show only the logs without the top button bar.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.1(Oct 27, 2016)

  • v1.1.0(Oct 19, 2016)

    ~~### Breaking~~

    ~~expandActionRoot and expandStateRoot properties are now false by default. When set to true, the whole object gets expanded (not only the root as before).~~

    Identify actions from "the future" when time travelling

    demo

    Big thanks to @jrullmann for describing it in https://github.com/gaearon/redux-devtools/issues/295.

    Mark the state's values which were changed

    image

    To use it, set the new markStateDiffproperty to true. Keep in mind that it affects the performance significantly! You might also want to set expandStateRoot to true as well when enabling it.

    Misc

    • Update react-json-tree to 0.10 (#54)
    • select property is not required (#57)
    • Consider null as a valid type (#55)
    Source code(tar.gz)
    Source code(zip)
  • v1.0.11(Apr 17, 2016)

  • v1.0.10(Apr 14, 2016)

  • v1.0.9(Apr 3, 2016)

  • v1.0.8(Apr 2, 2016)

  • v1.0.7(Apr 2, 2016)

  • v1.0.6(Apr 2, 2016)

  • v1.0.5(Mar 1, 2016)

    • Lock react-json-tree because it introduced a breaking change without bumping the leftmost non-zero version. (#39, https://github.com/chibicode/react-json-tree/pull/32)
    Source code(tar.gz)
    Source code(zip)
  • v1.0.4(Feb 3, 2016)

    • When preserveScrollTop is false, we now scroll to bottom on mount (#32, zalmoxisus/redux-devtools-extension#38)
    • When select prop is specified, we no longer apply it to the undefined initial previous state (#27, #28, 3af3102c48102296b82aacfcc9dc445b4df80b40)
    Source code(tar.gz)
    Source code(zip)
  • v1.0.3(Feb 2, 2016)

  • v1.0.2(Jan 13, 2016)

    • When preserveScrollTop prop is false, interval will not be fired
    • Adds new props to control what is expanded by default: expandActionRoot and expandStateRoot
    • Fixes an interval leak
    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Dec 14, 2015)

    • The initial stable release. (We're jumping to 1.0.1 because I botched the 1.0.0 release.) Compared to beta-3, there should be no visible changes other than that it requires DevTools 3.0.
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-beta-3(Oct 17, 2015)

  • v1.0.0-beta-2(Oct 17, 2015)

  • v1.0.0-beta-1(Oct 16, 2015)

    Everything changed again, but we're closing in on the final DevTools vNext API. This version also contains major performance improvements. For now, keep track in https://github.com/gaearon/redux-devtools/pull/132.

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-alpha-4(Sep 28, 2015)

    Breaking Change

    Pretty much all interaction with Redux is changed. As it's still alpha, there isn't much to describe right now—better follow along in https://github.com/gaearon/redux-devtools/pull/132!

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-alpha-3(Sep 27, 2015)

    Breaking Change

    The monitor now has its own reducer and actions. This replaces the need for setMonitorState which was clumsy (https://github.com/gaearon/redux-devtools/pull/122). This is also a step towards composable monitors.

    The visibleOnLoad prop is now removed. Instead, you are supposed to pass monitor's reducer to devTools store enhancer (only available since [email protected]):

    import { createMonitorReducer } from 'redux-devtools-log-monitor';
    
    const finalCreateStore = compose(
      applyMiddleware(thunk),
      devTools(createMonitorReducer({
        isVisibleOnLoad: true // <------------------- you can now configure initial visibility here
      })),
      persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
    )(createStore);
    
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-alpha-2(Sep 24, 2015)

  • v1.0.0-alpha(Sep 24, 2015)

Owner
Dan Abramov
Working on @reactjs. Co-author of Redux and Create React App. Building tools for humans.
Dan Abramov
Filterable tree view monitor for Redux DevTools

========================= Filterable tree view monitor for Redux DevTools. Actions are collapsed by default but they can be expanded by clicking on th

Brian Vaughn 151 May 7, 2021
Another Redux DevTools Monitor

redux-devtools-inspector This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull

Alexander Kuznetsov 241 Aug 10, 2021
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 12.2k Nov 23, 2021
A resizable and movable dock for Redux DevTools monitors

Redux DevTools Dock Monitor A resizable and movable dock for Redux DevTools. Powered by React Dock. Installation npm install --save-dev redux-devtools

Dan Abramov 401 Nov 11, 2021
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 12.2k Nov 24, 2021
Redux DevTools remotely.

Remote Redux DevTools Use Redux DevTools remotely for React Native, hybrid, desktop and server side Redux apps. Installation npm install --save-dev re

Mihail Diordiev 1.8k Nov 25, 2021
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 10 Aug 23, 2021
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Nov 23, 2021
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Nov 18, 2021
Official React bindings for Redux

React Redux Official React bindings for Redux. Performant and flexible. Installation Using Create React App The recommended way to start new apps with

Redux 21.6k Dec 2, 2021
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Nov 25, 2021
The official, opinionated, batteries-included toolset for efficient Redux development

Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development (Formerly known as "Redux Starter Kit") Installati

Redux 6.8k Dec 2, 2021
Thunk middleware for Redux

Redux Thunk Thunk middleware for Redux. npm install redux-thunk yarn add redux-thunk Note on 2.x Update Most tutorials today assume that you're using

Redux 16.8k Nov 24, 2021
Logger for Redux

Logger for Redux Now maintained by LogRocket! LogRocket is a production Redux logging tool that lets you replay problems as if they happened in your o

null 5.6k Nov 21, 2021
Selector library for Redux

Reselect Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskat

Redux 18.4k Nov 26, 2021
An alternative side effect model for Redux apps

redux-saga redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like acce

Redux-Saga 21.9k Nov 24, 2021
Declarative Side Effects for Redux

Redux Data FX Declarative Side Effects for Redux. It helps you keep your business logic and effectful code separate. The idea is simple: in addition o

Matthieu Béteille 53 Jun 30, 2021
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

redux-observable 7.8k Nov 29, 2021
Analytics middleware for Redux

redux-analytics Analytics middleware for Redux. $ npm install --save redux-analytics Want to customise your metadata further? Check out redux-tap. Usa

Mark Dalgleish 491 Nov 12, 2021