• Improved the overall design
• Rollback/sweep/commit now stands on the top of devtools
• You can now pass any base16 theme name prop or your own base16 colors to <LogMonitor/> (defaulting to ocean)
• Payload and state are expandable tree with variable type coloring
• States automatically highlights the differences between current and previous state with a subtle red background

Here is a screenshot of what it looks like using ocean's theme Original PR:

With changes:

After updating the Redux Dev Tools extension (Chrome) to v3 this weekend, our app is no longer working when the extension is enabled. Still works on Firefox as the add on hasn't been updated yet.

We use redux-most as middleware, like so:

import { createStore, compose, combineReducers } from 'redux'
import { combineEpics, createEpicMiddleware, createStateStreamEnhancer } from 'redux-most'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const epicMiddleware = createEpicMiddleware(
    combineEpics([
        appEpic,
        ... // other epics here
    ])
)

const store = createStore(
    combineReducers({
        appReducer,
        ... // other reducers here
    }),
    composeEnhancers(createStateStreamEnhancer(epicMiddleware))
)

export default store

And now when accessing state (using withState), instead of the regular state object being returned it looks something like this:

{
    actionsById: {...},  
    committedState: undefined, 
    computedStates: [{...}],
    currentStateIndex: 1,
    isLocked: false,
    isPaused: false,
    monitorState: {},
    nextActionId: 2,
    skippedActionIds: [],  
    stagedActionIds: [0, 1, ...],
}

Where the actual state object can be located at the last index of computedStates

Does anyone have any ideas as to what happened here and how it could be resolved? Thanks

Hi @gaearon,

I'm curious what you think about moving redux-devtools repos into a dedicated group, say https://github.com/redux-devtools. This idea has been discussed between @zalmoxisus, @romseguy and me here:

• https://github.com/romseguy/d3-state-visualizer/pull/13
• https://github.com/zalmoxisus/redux-devtools-extension/issues/269

Both @zalmoxisus and @romseguy seem to support this move as you can see in the comments, however, this might take some time given that they are not visiting github very often these days. The migration of the repos may remove some pressure from the original authors and also help PRs like https://github.com/romseguy/d3-state-visualizer/pull/13 quicker propagate to the end users (the one I'm mentioning is over six months old).

If you're happy to move the main redux-devtools repo into a new org, at least these other repos could go there as well:

• https://github.com/romseguy/d3-state-visualizer
• https://github.com/romseguy/redux-store-visualizer
• https://github.com/romseguy/redux-devtools-chart-monitor
• https://github.com/zalmoxisus/redux-devtools-extension
• https://github.com/zalmoxisus/remote-redux-devtools
• https://github.com/zalmoxisus/redux-devtools-instrument

BTW I'm not asking to become a part of the new group myself – I haven't contributed enough and I'm not sure I can take a long-term responsibility of a maintainer. However, I guess that a common place for the sister repos will help the community move the redux-devtools ecosystem forward! 🚀

WDYT?

This is a work in progress in extracting LogMonitor into a separate project and simplifying the API.

The todomvc example is currently broken, but counter example works. A few notable changes:

• <LogMonitor> is gone. It is now in a separate repo.
• <DevTools> is gone. You are expected to use monitors directly and pass their arbitrary props and store={store} to them. The monitors are now expected to wrap their root component like this:

import { connectMonitor } from 'redux-devtools';

class MyMonitor extends Component {
  /* business as usual */
}

export default connectMonitor(MyMonitor);

This lets the consumer use them directly:

export default class Root extends Component {
  render() {
    const { store } = this.props;
    return (
      <div>
        <Provider store={store}>
          <CounterApp />
        </Provider>
        <Dock position='right' isVisible dimMode='none'>
          <LogMonitor store={store} />
        </Dock>
      </div>
    );
  }
}

Please hold off updating custom monitors until we settle down on the API.

• <DebugPanel> is no more. I want the recommended solution to support resizing, moving and collapsing the panel. React Dock looks promising, but I'm not sure how to hook it up to persist the state without hardcoding this into the devTools logic. Ideally “monitor decorators” (one of which could be based on react-dock) should be able to hold their state in Redux devTools store independently. I'm not sure how to handle this yet, so suggestions are welcome.

• adds options parameter to instrument. Only maxAge property is used currently but could conceivably be used for other options.
• removes oldest actions once maxAge is reached
• should take care of memory issues caused by high-frequency actions

Usage:

DevTools.instrument({ maxAge: 30 });

Hello.

After update to v 3.0.3 this error appears:

Uncaught TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

The "guilty" line is:

import { from } from 'rxjs'; ..... -> const $store = from(store);

Looks very similar to https://github.com/reduxjs/redux-devtools/issues/274

With the new 3.0.4 version of the redux-devtools that went live yesterday the jira page won't load at all, just the side menu and some parts of the page, uninstalling the extension fixes the problem

I came here and saw no update was made, is there something wrong?

Update by @timdorr: A fixed version is pending review with Google. In the meantime, I've posted some workarounds here: https://github.com/reduxjs/redux-devtools/issues/1032#issuecomment-1016837825

dev tools getting an error...Lazy require of extension.binding did not set the binding field

(CONTENT_SCRIPT context for lmhkpmbekcpmknklioeibfkpmmfibljd) Lazy require of extension.binding did not set the binding field
(CONTENT_SCRIPT context for lmhkpmbekcpmknklioeibfkpmmfibljd) extensions::lastError:82: Uncaught TypeError: Cannot convert undefined or null to object{TypeError: Cannot convert undefined or null to object
    at Object.clear (extensions::lastError:82:23)
    at handleResponse (extensions::sendRequest:84:15)
    at chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/pagewrap.bundle.js:1:1}
(CONTENT_SCRIPT context for lmhkpmbekcpmknklioeibfkpmmfibljd) extensions::messaging:9: Uncaught Natives disabled{<stack trace unavailable>}
Uncaught
  (anonymous function)	

repo: https://github.com/born2net/studioweb

Angular 2 Kitchen sink: http://ng2.javascriptninja.io and source@ https://github.com/born2net/Angular-kitchen-sink Regards,

Sean

<DevTools> accepts a monitor prop. The monitor that ships with react-devtools is called LogMonitor but it's just a React component. You can build your own instead.

I challenge you to implement a really different monitor than what we ship with. Some crazy ideas:

• A slider that lets you jump between computed states just by dragging it
• An in-app layer that shows the last N states right in the app (e.g. for animation)
• A time machine like interface where the last N states of your app reside on different Z layers

LogMonitor propTypes should give you some ideas about the stuff injected by DevTools:

static propTypes = {
  // Stuff you can use
  computedStates: PropTypes.array.isRequired,
  currentStateIndex: PropTypes.number.isRequired,
  stagedActions: PropTypes.array.isRequired,
  skippedActions: PropTypes.object.isRequired,

  // Stuff you can do
  reset: PropTypes.func.isRequired,
  commit: PropTypes.func.isRequired,
  rollback: PropTypes.func.isRequired,
  sweep: PropTypes.func.isRequired,
  toggleAction: PropTypes.func.isRequired, // ({ index })
  jumpToState: PropTypes.func.isRequired // ({ index })
}

This data (and functions) will be injected into your monitor by the dev tools. Feel free to use (or ignore) any of them, and let me know if something important you need for a custom monitor is missing.

Currently, DebugPanel passes several styles down to the Monitor in use as an artifact of the original demo put together by @gaearon. Since new Monitors are being actively developed, and I believe we should be encouraging a consistent approach to syntax like:

<DebugPanel top right bottom>
   <DevTools store={store} monitor={LogMonitor} />
</DebugPanel>

...where LogMonitor is subbed out by the developer for their preferred Monitor.

To this effect, I suggest that DebugPanel be re-tooled to be concerned only with it's positioning on screen and anchoring (it's current properties remain intact, and also hotkeys for enabling / disabling visibility.

This frees Monitors up to be singularly focused on their own appearance and behaviours within the DebugPanel, and keeps the general DX with DevTools consistent irrespective of the Monitor being used. Diff-Monitor is guilty of re-implementing some of these as we didn't want to write overrides to the DebugPanel styles coming down, so I would be the first to jump onboard with a PR if this suggestion seems valid.

It seems like the redux devtools project has fallen into a state of disrepair. I've been occasionally dipping in and out over the last year, waiting to update to the latest cli package and leverage some of the new features that were added.

There are a number of issues that I see with the project at present.

• Published NPM versions are out of sync with the current code and documentation. Which is especially confusing for new developers trying to get the tools to work as described.
• Issues are piling up and not being responded to.
• A fair number of PRs that are in need of merging, from as far back as Jan 2019.

I'm sympathetic to the burden of maintaining a OSS project. I was wondering if the current maintainers would be open to allowing others on board. I myself would be open to trying to clean up some of the outstanding items as my team directly benefits from the tooling.

I'm sure there are others who would be open to sharing some of the burden.

@gaearon @zalmoxisus @timdorr @bvaughn

Thanks

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

[email protected]

Major Changes

• b323f77d: - Remove UMD build.
  • Split style option into chartStyles, nodeStyleOptions, textStyleOptions, and linkStyles.
  • The shape of the argument passed to the onClickText option has been updated.
  • Rename InputOptions to Options, Primitive to StyleValue, and NodeWithId to HierarchyPointNode<Node>.

Patch Changes

• Updated dependencies [b323f77d]
• Updated dependencies [b323f77d]
  • [email protected]
  • [email protected]

[email protected]

Major Changes

• b323f77d: - Remove UMD build.
  • Upgrade d3 peer dependency from v3 to v5.
  • Remove attr configuration method.
  • Rename style configuration method to styles and move to options.
  • Move text configuration method to options.
  • Remove d3 parameter as first parameter for tooltip.

[email protected]

Major Changes

• b323f77d: - Remove UMD build.

@redux-devtools/[email protected]

Major Changes

• b323f77d: - Split style option into chartStyles, nodeStyleOptions, textStyleOptions, and linkStyles.
  • The shape of the argument passed to the onClickText option has been updated.

Patch Changes

• Updated dependencies [b323f77d]
  • [email protected]

@redux-devtools/[email protected]

Patch Changes

• Updated dependencies [b323f77d]
• Updated dependencies [b323f77d]
  • [email protected]
  • @redux-devtools/[email protected]

[email protected]

Patch Changes

• Updated dependencies [b323f77d]
• Updated dependencies [b323f77d]
  • [email protected]
  • [email protected]

Add search feature for State tree.

Search is done using a fork of JSONPath-plus (fork used: https://github.com/JSONPath-Plus/JSONPath/pull/185 ) which adds support for Content Security Policy by eliminating the use of eval/Function.

Being JSONPath, we can use complex expressions to search the tree by property names or values.

A sample expression is $..[?(@ && @.id%3 === 0)] tried in https://zalmoxisus.github.io/examples/router/#/Standard%20Todo?_k=pnapms

Fixes https://github.com/reduxjs/redux-devtools/issues/989

This PR contains the following updates:

| Update | Change | |---|---| | lockFileMaintenance | All locks refreshed |

🔧 This Pull Request updates lock files to use the latest dependency versions.

Configuration

📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @babel/cli (source) | ^7.19.3 -> ^7.20.7 | | | | | | @babel/core (source) | ^7.20.5 -> ^7.20.7 | | | | | | @babel/runtime (source) | ^7.20.6 -> ^7.20.7 | | | | | | @chakra-ui/react (source) | ^2.4.4 -> ^2.4.6 | | | | | | @testing-library/dom | ^8.19.0 -> ^8.19.1 | | | | | | @types/codemirror (source) | ^5.60.5 -> ^5.60.6 | | | | | | @types/es6template (source) | ^1.0.0 -> ^1.0.1 | | | | | | @types/jest (source) | ^29.2.4 -> ^29.2.5 | | | | | | @types/morgan (source) | ^1.9.3 -> ^1.9.4 | | | | | | @types/node (source) | ^18.11.17 -> ^18.11.18 | | | | | | @types/react-dom (source) | ^18.0.9 -> ^18.0.10 | | | | | | @typescript-eslint/eslint-plugin | ^5.47.0 -> ^5.48.0 | | | | | | @typescript-eslint/parser | ^5.47.0 -> ^5.48.0 | | | | | | eslint (source) | ^8.30.0 -> ^8.31.0 | | | | | | eslint-config-prettier | ^8.5.0 -> ^8.6.0 | | | | | | eslint-plugin-jest | ^27.1.7 -> ^27.2.0 | | | | | | framer-motion | ^8.0.1 -> ^8.1.3 | | | | | | immutable (source) | ^4.1.0 -> ^4.2.1 | | | | | | nx (source) | ^15.3.3 -> ^15.4.2 | | | | | | pnpm (source) | 7.19.0 -> 7.21.0 | | | | | | react-router-dom | ^6.6.0 -> ^6.6.1 | | | | | | rollup (source) | ^3.7.5 -> ^3.9.1 | | | | | | stylelint (source) | ^14.16.0 -> ^14.16.1 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

I quite often have several tabs open of apps I'm developing in various environments (prod/test/ci) and I find it difficult to know which one is the one I want or whether I'm looking at the correct instance as the instance just shows the page title:

It would be nice if we could show the origin/url of the instance alongside the page title to make it easier to find the instance you're looking for: