React: DevTools: Ability to save inspected values as global variable (as it was in previous version)

[val-o]

Hi, I really like new dev tools (4.0.5), but I would like to request one useful feature.

In previous version it was possible to save inspected value (prop/state/context) and its parts as a global variable using context menu->store as global variable, so it can be easily be accessed through console using $tmp{n}. In current version this is behaviour was replaced be creating new "bug" button which will just print all values in console. Unfortunately it's hard to navigate through this object, because $_ in console will return undefined. And in order to access it you need to expand group, find desired property and open context menu->store as global variable.
It would be perfect if you combine these 2 approaches so it would be possible to both print values using "bug" button and opening context menu directly in react dev tools panel wihtout need of intermediate step.

Thanks!

[gaearon]

Maybe values in the tree could have a "bug" button next to them too that appears only on hover.

[bvaughn]

See issue #16428

I don't personally think this needs to be a top level button. You can still store global vars using the console itself and the existing UI:

[bvaughn]

Maybe values in the tree could have a "bug" button next to them too that appears only on hover.

This is a little tricky in some edge cases (really close to the right/left side) and probably not the greatest in terms of accessibility (although we have a lot of areas we could stand to improve on in this regard).

[val-o]

@

See issue #16428

I don't personally think this needs to be a top level button. You can still store global vars using the console itself and the existing UI:

Hi @bvaughn, the problem in this flow is that you need to do 3 steps:

1. click on bug
2. expand a group and find desired field
3. right click to store it as global var.
   On the other hand, in previous version you can directly store desired property through react dev tools.
   Maybe just enable old context menu in the right panel of react dev tools?

[bvaughn]

It's slightly more clicks (3 vs 2) but I don't think that necessarily means we need to change it. I don't think this is a very common interaction, and screen real estate is pretty precious in a DevTools.

[gaearon]

It's slightly more clicks (3 vs 2)

I think @AkhmedovValikhan's point is that usually you start inspecting props/state inline, get to some nested field, and _then_ realize you want to save it. So it's not just one click more; you have to redo the whole "find the nested field" thing after logging.

[jsc144]

+1 this feature was very helpful for debugging in the previous version. Now debugging at run time takes longer and is less intuitive.

@bvaughn

It's slightly more clicks (3 vs 2) but I don't think that necessarily means we need to change it. I don't think this is a very common interaction, and screen real estate is pretty precious in a DevTools.

This feature was in the context menu, so how does it affects screen real estate?

[pauls-ai2]

Moreover, it seems like you can't make a context item a global any more. With the new bug icon, it logs out props, state, and nodes; but not context.

[bvaughn]

@pauls-ai2 For class components, context should still accessible via the $r mechanism I showed above.

For function components (useContext) it would be inside of the hooks array, which is admittedly a little more difficult to get to but it's there:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!