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

[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

[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!

[kristian-puccio]

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

[ntucker]

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

[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)

[tiye]

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.

[ntucker]

+500

[felixakiragreen]

👍

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.

[tiye]

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]

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
#52 (comment)
.

[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]

#459 should address this. Can anyone give it a try?

[gaearon]

Closing as fixed by #459.
Will be out soon.

[gaearon]

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