React-devtools: Tools should display an additional field for the 'native js' version of Immutable objects

[twisterghost]

While working on a React/Flux project and having Immutables here and there, I've noticed that the dev tools become pretty silly when inspecting the state of an element that uses Immutable.

While first looking through the codebase, I noticed that the state of an object is being pulled and pushed to the sidebar here. With a bit of hacking around, I began to notice that there is no place where the actual values are read or passed around, but instead, only references to the values.

I'm not sure how possible this may be, but I feel that with the deep ties between React, Flux and Immutable, the dev tools should be able to detect an immutable and provide either an extra property on the state panel or a new panel altogether with the .toJS()'d version of the immutable to help developers work with these utilities.

[BinaryMuse]

Agreed, this would be really nice. Not sure if others agree, but I feel like in an ideal world, we could integrate application code into the React devtools (e.g. to make them understand arbitrary data structures)

[jiyinyiyong]

After reading this new post I really want this to be fixed
http://facebook.github.io/react/docs/advanced-performance.html
Feeling bad seeing this:

[0x80]

+1!

[cassus]

+1

[cesarandreu]

+1

[sophiebits]

"+1" comments do not help us. Please stop.

[cbenz]

Just asked myself the same question and found that with the new devtools extension, the $r global variable helps a lot: even if the sidebar still shows the internals of the immutable variables, I can select the component and type in the console:

$r.props.myImmutableProp.toJS()

or even use right-click "Store as a global variable" on the immutable prop/state then:

$tmp.toJS()

This is a temporary solution!

[ntucker]

+500

[felixakiragreen]

:+1:

This is so tedious to open every time:

[gregberge]

Can we expect a support soon? We can handle it with "store as global variable", but should be great to have the "toJS" displayed directly in the panel. I can work on a PR if you want.

[jiyinyiyong]

It reminds of this thing https://github.com/binaryage/cljs-devtools ClojureScript is inventing it own Console panel to display its data nice and fine.

[kristian-puccio]

https://github.com/andrewdavey/immutable-devtools

[ntucker]

@kristian-puccio that's great for console, but doesn't work on react-devtools

[kristian-puccio]

Yeah I was wondering if some of the code is transferable

On 6 March 2016 at 21:38, Nathaniel Tucker [email protected] wrote:

@kristian-puccio https://github.com/kristian-puccio that's great for
console, but doesn't work on react-devtools

—
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-devtools/issues/52#issuecomment-192868698
.

[roblabla]

For those looking for this, PR #149 fixes it. I have an updated fork of this PR here : https://github.com/roblabla/react-devtools

[wmill]

+1

[gaperton]

Not sure if others agree, but I feel like in an ideal world, we could integrate application code into the React devtools (e.g. to make them understand arbitrary data structures)

@BinaryMuse Of course, I agree. Thus, it's done in PR #469 . That's how hooking into dev tools looks like on the example of Date class (which is actually implemented as a part of this PR to resolve #388 ).

if (__REACT_DEVTOOLS_GLOBAL_HOOK__) {
  const { addInnerStateInspector } = __REACT_DEVTOOLS_GLOBAL_HOOK__;
  if (typeof addInnerStateInspector === 'function') {
    addInnerStateInspector( Date, x => ({
       local : `${ x.toDateString() } ${ x.toTimeString() }`,
       iso : x.toISOString(),
       timestamp : x.getTime(),
    });
  }
}

Welcome to the ideal world :). If it will be accepted, I will implement support for ImmutableJS data structures.

[gaearon]

https://github.com/facebook/react-devtools/issues/459 should address this. Can anyone give it a try?

[gaearon]

Closing as fixed by https://github.com/facebook/react-devtools/pull/459.
Will be out soon.

[gaearon]

Immutable (or any iterable, really) support is implemented in the latest version.