Changes made in elements tab not reflected in react tab about react-devtools

[sebmarkbage]

This is actually intentional since mutating the real DOM doesn't update React's virtual DOM. In theory we could let you make changes in the DOM and reverse those changes in to the virtual DOM.

However, the virtual DOM is higher level and we can't really reliably infer what changes to the real DOM means at a higher level. Does it mean that the abstraction that generated the node should move or be deleted as well? A custom object can have values other than strings such as objects passed into the style property. We'd have to reverse engineer those style objects.

Changing the output of a component is tricky anyway. As soon as a higher level component rerenders, it will have to try to revert your changes.

It's interesting feedback though. Any particular reason you would prefer to edit your tree in the elements tab instead of the React tab?

[deepak1556]

Thanks for the info! these are some of the reasons i prefer to use the elements tab.

• visual link from elements tab to the rendered page.
• Setting breakpoints
• search for nodes by selectors

[sebmarkbage]

That's great feedback. So how about we add those three things to the React tab?

[deepak1556]

That wld be gr8 👍 ! i just started to look over the code base to get going with the feature implementation.

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[jaredly]

Looks like this issue is a "won't fix"
In the new version of devtools you can search for components, and there's a visual link to the rendered page. If there are other features you are missing, let us know!
Also, any element you select in the elements tab will likewise be selected in the react tab.