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)

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

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

👍

This is so tedious to open every time: