React-devtools: Expand all nodes

Created on 18 Mar 2016 · 3Comments · Source: facebook/react-devtools

By default the dev tools, collapses everything. And its tedious to have to keep expanding it one by one, and there is no way to expand them all.

Its possible I'm actually missing something because its very tedious, and I was surprised to see that my preliminary search on issues yielded no results related to that.

Please consider having an "Expand all" for the nodes shown, and also an option to auto-expand. Sometimes, we want to auto expand, and sometimes we don't depending on the size of the tree and the root node that's in scope. So, having the ability to auto expand will be of major help.

Source

prasannavl

👍2

Most helpful comment

@spicyj wrote:

I don't think we'll plan to do this because it could easily get prohibitively large on pages with large trees (ex: Facebook).

Forgive me if this is a stupid question (I'm fairly new to React), but didn't the original poster already suggest, or at least imply a way to implement this feature whilst avoiding any issues with performance on pages with large trees? He said:

Please consider having [...] also an option to auto-expand. Sometimes, we want to auto expand, and sometimes we don't depending on the size of the tree and the root node that's in scope.

So the simple solution would be an option which the user manual enables or disables, depending on whether the tree is small enough for auto-expand to work with acceptable performance. Granted, the user might enable this for a site with a small tree, and then switch to another site with a large tree and have their browser (or at least, the tab) grind to a halt. But wouldn't it be pretty easy to defend against this? I can think of several approaches which could even be combined:

Limit the auto-expand feature to a maximum depth. (OK, this won't always work if you have a shallow and very wide tree.)
Limit the auto-expand feature to a maximum number of total nodes. If auto-expanding a node would tip the total number of visible nodes over that threshold, simply stop auto-expanding.
Limit the auto-expand feature to a maximum number of nodes per parent. (Similar to the above, but with per node limits.)
Auto-expand as many nodes as you can within a fixed time threshold.

It would be great if you could reconsider whether this feature would be possible to implement, because the default view which only shows the root component collapsed really isn't very useful. For comparison, it's worth noting that the tree in the Elements tab is automatically expanded by default so that not only is the root <html> element expanded, but also the top level under <body> is visible.

If you select a node in the Elements panel and switch to the React panel though, it should automatically highlight the corresponding component.

Thanks, this is a very useful tip! However it's still really inconvenient to have to switch to the Elements tab and back to the React one each time the page reloads (which is very frequently during development).

aspiers on 25 Mar 2017

👍5

All 3 comments

I don't think we'll plan to do this because it could easily get prohibitively large on pages with large trees (ex: Facebook). If you select a node in the Elements panel and switch to the React panel though, it should automatically highlight the corresponding component.

Hope that helps!

sophiebits on 31 Mar 2016

@spicyj wrote:

I don't think we'll plan to do this because it could easily get prohibitively large on pages with large trees (ex: Facebook).

Please consider having [...] also an option to auto-expand. Sometimes, we want to auto expand, and sometimes we don't depending on the size of the tree and the root node that's in scope.

Limit the auto-expand feature to a maximum depth. (OK, this won't always work if you have a shallow and very wide tree.)
Limit the auto-expand feature to a maximum number of total nodes. If auto-expanding a node would tip the total number of visible nodes over that threshold, simply stop auto-expanding.
Limit the auto-expand feature to a maximum number of nodes per parent. (Similar to the above, but with per node limits.)
Auto-expand as many nodes as you can within a fixed time threshold.