如何通过React Dev Tools获取页面渲染组件的枚举信息？

嘿，我刚好有几个靠谱的办法能帮你把React Dev Tools里的组件树导出成文本格式（类似tree命令的结构），完全不用依赖源码解析，直接用Dev Tools里已经拿到的准确数据：

方法1：用React Dev Tools内置的隐藏复制功能 #

这是最简单的方式，很多人不知道Dev Tools自带这个：

• 打开React Dev Tools的「Components」标签
• 右键点击你想开始导出的组件（比如根组件）
• 在弹出菜单里找「Copy component tree」（部分版本可能叫「Copy hierarchy」）
• 粘贴到文本编辑器里，就能得到层级清晰的组件树文本了

方法2：控制台脚本自定义提取（格式更灵活） #

如果内置复制的格式不符合你的文档需求，可以用浏览器控制台脚本直接从Dev Tools的API拉取数据：

1. 确保React Dev Tools已经打开并连接到当前页面
2. 按下F12打开浏览器控制台
3. 粘贴并运行以下脚本：

// 递归打印组件树的函数
function printComponentTree(fiber, indent = 0) {
  // 获取组件名称，优先用displayName，没有就取type.name，兜底用Unknown
  const componentName = fiber.displayName || fiber.type?.name || 'UnknownComponent';
  // 打印带缩进的层级结构
  console.log(`${'  '.repeat(indent)}└─ ${componentName}`);
  
  // 遍历子组件，过滤掉普通DOM节点，只处理React组件
  let child = fiber.child;
  while (child) {
    if (child.type && typeof child.type !== 'string') {
      printComponentTree(child, indent + 1);
    }
    child = child.sibling;
  }
}

// 获取页面的根Fiber节点
const rootFiber = __REACT_DEVTOOLS_GLOBAL_HOOK__.getFiberRoots(1).next.value.current;
// 开始打印
printComponentTree(rootFiber);

• 运行后控制台会输出结构化的组件树，你可以右键控制台的输出内容复制保存
• 小提示：这个脚本基于React Dev Tools的内部API，不同React版本可能需要微调，但绝大多数场景下都能正常工作

方法3：社区扩展插件增强（可选） #

如果经常需要导出，也可以找一些专门增强React Dev Tools的浏览器插件，它们能支持导出为Markdown、JSON等多种格式，不过记得只从官方应用商店安装可信插件哦

这些方法都是直接复用React Dev Tools已经捕获到的组件实例数据，和源码解析完全无关，所以准确性和你在Dev Tools里看到的完全一致，刚好能满足你编写通用文档的需求～

内容的提问来源于stack exchange，提问作者justin