I've noticed when experimenting with this monitor, I get errors like the following:

Uncaught Invariant Violation: findComponentRoot(..., .0.1.1.1.$/=10.1.1.0.$router.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID``.

The monitor's behavior doesn't appear to be affected. The DOM node corresponds to an item in the monitor's diff tree (in the above example, state.router, though I've also seen it for other top-level parts of the state, so it may not be related to react-router. It does appear to happen often on page transitions.

I'm sorry that I don't have a more reproducible example at the moment. I'll try to dig in and find a more specific cause when I have time. Perhaps you have some idea of what might be causing this?

Okay, so this is a bit of a bold move, but as I have mentioned here, I don't really see why there is a separate node for Iterable objects. Yes, this monitor does show the type of the object in the state, but I think that has limited value. I also think the amount of effort to get this to work with immutable properly would be mammoth (I got some way towards making the JSONDiff module work, when I realised that the whole "pin" feature is incompatible as well.

I think this solution (converting to pure JS) is the cleanest, and provides immediate support for the immutable library without a huge undertaking. If you want to go back and do it properly another time, fair enough, but for now I think this is the right way to go.

This will sort the JSON tree keys in alphabetical order, rather than with the implementation-dependent ordering determined by the browser engine's getOwnPropertyNames function. In large JSON structures, it can be challenging to locate a particular nested node of interest among the multitude of other keys. Adding this sorting will dramatically simplify locating specific state attributes. The request comes from zalmoxisus/redux-devtools-extension#416.

Note that the localeCompare function is supported in all major browsers per MDN. It is case-sensitive, so abc will come before Abc.

If it's preferable that this be opt-in so as not to upset existing applications, I'm more than happy to make changes as advised. Thanks!

As per https://github.com/alexkuz/redux-devtools-inspector/pull/31#issuecomment-226203139, it will be possible to specify add tabs for custom React components to inspect selected actions as bellow:

<InspectorMonitor 
   customTabs = {{
      'MyInspect': <MyInspectComponent />
   }}
/>

Use with redux-devtools-test-generator to generate tests for specific actions.

Starting from 0.4 the inspector monitor stores monitor state in devtools, which is a great feature, but not for the extension. Imagine that every 150 ms the extension will dispatch a monitor action to the injected script, will serialize the liftedStore and parse it in the backgrond. It will crash the browser for sure. We can do some optimizations, but anyway it will slow the extension down.

What do you think of having an alternative of the monitor reducers?

How do people feel about being able to color code actions?

My first thought was when { error: true } using some kind of red so that errors stand out in the error timeline. But then I got to thinking why not others why not let the application style its actions, so that a developer can more easily pick out actions from the timeline. Something like:

{
  type: MY_ACTION,
  payload: { .... }
  _inspector: {
    color: '#0f0',
    background: '#00f'
  }
}

I'm sure people will protest adding this configuration to application code bases in this way, I'm not mad about it. But I can't think of an alternative that isn't horribly complex.

I've gotten used to the Commit feature of the LogMonitor, but the ability to diff state in Inspector is awesome. Right now I am switching between LogMonitor to commit the state and back to Inspector to continue work.

I would like to see the commit feature in this monitor too!

Trying to install this with yarn fails on node > 6 because jss has version required of node < 6.0.0. The latest version of jss does not have this issue so would be good to upgrade (if possible!).

Thanks for a great tool!

As mentioned here: https://github.com/chibicode/react-json-tree/pull/32 immutable does not work correctly with this monitor due to a.) a bug in react-json-tree and b.) the fact that the jsondiff view does not consider immutable when generating deltas.

In addition to custom tabs, now it's possible to specify custom subtabs with selectors as following:

<DevtoolsInspector
                         tabs={defaultTabs => [{
                           name: 'Custom Tab',
                           components: [
                             {
                               name: 'Action as JSON',
                               component: CustomComponent,
                               selector: ({ action }) => ({ data: action })
                             },
                             {
                               name: 'State as JSON',
                               component: CustomComponent,
                               selector: ({ nextState }) => ({ data: nextState })
                             }
                           ]
                         }, ...defaultTabs]} />

Which gives:

It would be great if the monitor included redux-devtools-log-monitor's action disabling feature:

Clicking some part of an action disables it from the history, causing subsequent states to be recomputed.

It looks like it wouldn't require much code -- I can work on a PR if you're interested in the feature.

NOTE: test fails because of noflow in types.js. Not my fault :)

This overrides getText from src/tabs/getItemString.js with user-defined formatItem. Example use case: generate appropriate labels for custom datatypes. See other details in README.

If type is checked before val is modified, new val may have invalid type.

In my case

val = [ 1234, 5678]

and type is 'Array' but then val gets assigned 5678

https://github.com/alexkuz/redux-devtools-inspector/commit/9dfaaabcfba7913fd15ee6ee43627e0ceb1d5c7b#diff-d6461f2218156760b2d63ced35272d86R8

PR: https://github.com/alexkuz/redux-devtools-inspector/pull/72

I created a PR https://github.com/alexkuz/redux-devtools-inspector/pull/70 to bump the version and fix some eslint errors. I need this commit to be published: https://github.com/alexkuz/redux-devtools-inspector/commit/5202f01f15779a7a01e6679272a6d5f4566d646f In my case blobs in the store (introduced by https://github.com/agrasley/react-recorder-redux) are throwing errors without it.

getting these 2 warnings in webpack bundle:

WARNING in ../~/jsondiffpatch/src/main.js
56:20-50 Critical dependency: the request of a dependency is an expression

WARNING in ../~/jsondiffpatch/src/main.js
61:19-47 Critical dependency: the request of a dependency is an expression

It allows submonitors in tabs to have access and update monitorState. For example redux-devtools-test-generator can persist test templates. We're not dividing them into substates, so one should do it on the submonitor side like so. It could be useful to have access to the whole monitorState, for example, for Chart tab we can switch to other tab when the node is clicked.