Highlight the owner tree when a node is focused

[gaearon]

When "owner" information is available, filter the breadcrumbs strip to only show owners. When this info is not available, filter it to only show "Composite" components (e.g. no host nodes).

Original description

I often want to debug why a prop is wrong. Unfortunately in deep trees it's very hard to say which component has passed which prop down (and at which point it got messed up).

We already have a concept of "owners" in React. We could surface that information by highlighting the owner tree whenever you focus on a node. It could be something subtle, like a small difference in opacity, or background color of owners, but I think could really help navigate large trees.

As a bonus I think it would make the "unrelated HOCs" issue less annoying, at least for the use case of debugging "why is this render result wrong" (which for me represents the majority of use cases for DevTools).

[bvaughn]

Owner information is tracked in two places:

• It's stored transiently on a React element
• It's stored on Fiber's as _debugOwner (in DEV mode only)

The element is never exposed to DevTools directly exposed to DevTools indirectly, via the children prop, but the only direct exposure is the _debugOwner attribute would be useful– and only in DEV mode. (Not sure off the top of my head if it's available, or in what form, for older majors.)

So what's the proposal for supporting this functionality?

[gaearon]

Maybe we can use _debugOwner when available, and fall back to showing the parent.

In React 15, owner information is available from _currentElement._owner both in DEV and PROD.

[bvaughn]

Gotcha.

So we could add a new "owner" property to the "data" object and use it to filter the breadcrumbs list when present. That makes sense.

I guess the behavior when "owner" is null (aka 16+ production build) would just be... an unfiltered list? like we currently have? Seems a bit awkward, but maybe it's okay since DevTools is already awkward in production mode with e.g. minified component names)

Edit Although what "owner" points to is a bit gross too. Ideally it would point to the DataType of the owner– but I'm not sure how to actually get to that object. We could recreate it but that seems expensive.

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools