Javascript 跟踪页面中调用的所有组件的方法

我需要一种方法来跟踪页面呈现时的所有组件调用，例如，如果我的页面如下所示：

<MyPage>
   <A />
   <B>
      <B2/>
      <B3>
   </B>
   <C /> // witch the component C, calls D in its own code
</MyPage>

//组件C在其自身代码中调用D

C就像：

<C>
   <D />
</C>

诸如此类，如果为呈现页面调用一组嵌套组件，我需要所有组件的列表，在本例中，我需要（a，B，B2，B3，C，D）

---

这可能吗？

您看过React Developer Tools插件（，）了吗？这将为开发人员工具添加一个“组件”选项卡，如下所示：

---

然后，您可以选择任何组件，以获得有关该组件的更多详细信息。

这就像您在React Chrome extension（一个开源项目）中询问已经完成的事情一样。。 当您查看它的main.js文件时 有一些值得注意的进口

进口{ getAppendComponentStack， GetBreakon错误， getSavedComponentFilters， GetShowInLineWarningAndErrors， }来自“react devtools shared/src/utils”

我认为您需要的是必须在getAppendComponentStack实用程序中。。 也检查一下这个

当然，你会通过一些分析来制定解决方案

---

#使用移动版。。请记住答案的格式。

谢谢，完全忘记了开发工具