How to check for components from a chrome extension tool?

Question

I am working on a tool in the form of a chrome extension that checks the timing metrics for components wrapped in the Suspense component to check how long they were suspense for. Here's an example of what I am referring to.

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

However, I am having trouble checking for specific component names. Was wondering if someone could suggest an approach or a method of retrieving component names.

score 1 · Accepted Answer · answered Oct 02 '20 at 02:32

Found out after digging a while in Reacts fibre tree (by console logging document.getElementById('root')._reactRootContainer._internalRoot.current in the browser, also make sure your root is called "root") that you are able to distinguish Suspense components by their tag. Eventually led me to this link: https://github.com/facebook/react/blob/cbbc2b6c4d0d8519145560bd8183ecde55168b12/packages/shared/ReactWorkTags.js#L34

and I was able to console.log Suspense components by search tag === 13.

How to check for components from a chrome extension tool?

1 Answers1