如何使 React Components Dev 工具更易读/更有用？

Question

I am trying to troubleshoot a component but find it nearly impossible to locate b.c. the React Dev tools explicitly put all this excess information into the component hierarchy.

Particularly Connect Function and Context.Provider . The nesting level gets absurd. Maybe even ludicrous.

As a side question what does memo stand for and mean?

It just easier to inspect the HTML directly with out the tools. Could not find a tag for React dev tools.

Answer 1

In dev tools if you click on the gear to get to the settings then click on the Components tab in the settings there are filtering options to hide components in the tree based on a wide variety of conditions.

You can see a little animated screenshot of this here: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#where-did-all-of-the-dom-elements-go