react-devtools: tiny feature request (copy to clipboard related)

Created on 27 Sep 2019  路  9Comments  路  Source: facebook/react

Hey guys, great job with the new devtools 馃挴 perhaps this request can be put in the backlog for a future release as I think it could be quite useful and could save a few steps for developers.

What is the current behavior?

  • Copying data to clipboard stringifies all key-value pairs of an object
  • When the keys' values happen to be objects or arrays, the values are given in constructor form rather than seeing the contents of that object/array

This is what was copied:
Screen Shot 2019-09-27 at 12 24 19

This is a pasted version in VSCode:
Screen Shot 2019-09-27 at 12 24 48

What is the desired behavior?

  • When I click on "Copy to clipboard" in react-devtools, my copied object's data _keys_ and _values_ are in an unstringified format, or at least, I am presented the option to have this copied in an unstringified format
  • The _values_ of each key is readable, e.g: if the value is an object, I can see the expanded object and all its key-value pairs clearly as shown here (this is logged into Chrome console from react-devtools)
    Screen Shot 2019-09-27 at 12 29 11
Developer Tools Stale Feature Request good first issue (taken)

Most helpful comment

I am not in favor of adding a copy button for each prop field. That would clutter an already crowded interface.

All 9 comments

I would like to have a look at this one if that's OK?

@ChrisDobby It's all yours

But there is still an issue we want to have in mind, if we just copy the whole object structure, we can basically copy a huge chunk of vdom tree. For example, imagine if you try to copy the props of one of the high-level components (which has children) it can essentially lead to cases, that we create a JSON for almost the whole component tree, and I guess that is something we don't want.

This is why we already have Log this component data to console so you can copy the parts you want.
Another option is to be able to copy parts of props (have copy option for every input in props).

Yes I see what you mean. I have an implementation that copies the whole object structure of the props of a component without the children so it could be that this would be OK? If not then having a copy option for each input could work.

I am not in favor of adding a copy button for each prop field. That would clutter an already crowded interface.

I agree, just without children can work fine

Copying everything but children seems reasonable I think.

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.

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!

Was this page helpful?
0 / 5 - 0 ratings