如何从 chrome 扩展工具中检查 <Suspense> 组件?

How to check for <Suspense> components from a chrome extension tool?

我正在开发一个 chrome 扩展形式的工具,它检查 Suspense 组件中包装的组件的计时指标,以检查它们被暂停了多长时间。这是我所指的示例。

<Suspense placeholder={<h1>Loading...</h1>}>
  <Component />
</Suspense>

但是,我在检查特定组件名称时遇到问题。 想知道是否有人可以建议一种检索组件名称的方法或方法。

在 Reacts fiber 树中挖掘一段时间后发现(通过控制台在浏览器中记录 document.getElementById('root')._reactRootContainer._internalRoot.current,还要确保你的根称为“root”),你可以通过标签来区分 Suspense 组件.最终让我想到了这个 link: https://github.com/facebook/react/blob/cbbc2b6c4d0d8519145560bd8183ecde55168b12/packages/shared/ReactWorkTags.js#L34

并且我能够 console.log 通过搜索标签暂停组件 === 13.