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

Question

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

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

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

Answer 1

在 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.

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