Get React tree with React dev tools with optional styled-components ID

get-react-tree.js

((hook) => {
  const rootFiber = hook.renderers
    .get(1)
    .findFiberByHostInstance(document.querySelector("#__next > div"));

  function getFiberName(fiberNode) {
    const type = fiberNode.type;
    let name = "Unknown";

    if (typeof type === "function") {
      name = type.displayName || type.name || "Anonymous";
    } else if (typeof type === "string") {
      name = type;
    }

    return name;
  }

  function buildFiberTree(fiberNode) {
    if (!fiberNode) return null;

    const name = getFiberName(fiberNode);
    const styledId = fiberNode._debugOwner?.type?.styledComponentId || "";

    const children = [];
    let child = fiberNode.child;
    while (child) {
      const subtree = buildFiberTree(child);
      if (subtree) children.push(subtree);
      child = child.sibling;
    }

    return { name, styledId, children };
  }

  function collectComponentNames(fiberNode, names = new Set()) {
    if (!fiberNode) return;

    const name = getFiberName(fiberNode);
    names.add(name);

    if (fiberNode.child) collectComponentNames(fiberNode.child, names);
    if (fiberNode.sibling) collectComponentNames(fiberNode.sibling, names);

    return names;
  }

  const tree = buildFiberTree(rootFiber);
  console.log(tree);
})(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);