如何在Electron中读取包含frames/iframe的完整DOM源代码

普通渲染进程内调用outerHTML、手动遍历DOM的方案不可能达到DevTools Elements面板的效果：一是跨域iframe受同源策略限制完全无法访问，二是手动拼接的内容会丢失浏览器原生的DOM标准化修正（比如自动补全缺失标签、属性值归一化），和实际面板展示内容存在差异。
DevTools Elements面板的数据源完全来自Chromium内置的Chrome DevTools Protocol（CDP）DOM域接口，Electron原生暴露了这套接口的调用能力，不受同源策略限制，输出内容和面板展示1:1对齐，是唯一可行的路径。

具体实现步骤 #

1. 主进程初始化CDP连接 #

在页面加载完成后，通过webContents.debugger附加到目标页面，不需要修改任何安全相关配置（比如关闭webSecurity）。

// 主进程代码
const { BrowserWindow } = require('electron');
const mainWin = new BrowserWindow({ /* 你的常规窗口配置 */ });

mainWin.webContents.on('did-finish-load', async () => {
  // 附加调试通道，和DevTools底层用的是同一套数据管道
  mainWin.webContents.debugger.attach('1.3');
  // 启用DOM域能力
  await mainWin.webContents.debugger.sendCommand('DOM.enable');

  // 拉取全量DOM树，核心参数pierce:true表示穿透iframe、shadow DOM边界，depth:-1表示递归拉取所有层级节点
  const { root } = await mainWin.webContents.debugger.sendCommand('DOM.getDocument', {
    depth: -1,
    pierce: true
  });
  // root即为全量DOM树的根节点，可直接遍历得到全量元素列表
});

2. 按需输出两种目标格式的内容 #

形式1：可遍历的全量元素列表（支持访问每个元素的文本表示）

拿到根节点后递归遍历整棵树即可，每个元素节点都可以通过CDP接口拿到和Elements面板完全一致的outerHTML文本、属性、子节点信息，iframe的内部文档会挂载在对应iframe节点的contentDocument字段下。
参考遍历逻辑：

async function collectAllNodes(nodeId) {
  // 拉取当前节点的详情和标准化HTML文本
  const { outerHTML } = await mainWin.webContents.debugger.sendCommand('DOM.getOuterHTML', { nodeId });
  const { node } = await mainWin.webContents.debugger.sendCommand('DOM.describeNode', {
    nodeId,
    depth: 1,
    pierce: true
  });

  const currentNode = {
    nodeId,
    tag: node.nodeName.toLowerCase(),
    attrs: node.attributes || [],
    outerHTML,
    children: []
  };

  // 收集普通子元素节点
  if (node.children?.length) {
    for (const child of node.children) {
      if (child.nodeType === 1) { // 过滤文本、注释节点，可按需调整过滤规则
        currentNode.children.push(await collectAllNodes(child.nodeId));
      }
    }
  }

  // 收集iframe内部的子节点
  if (node.contentDocument?.children?.length) {
    for (const child of node.contentDocument.children) {
      if (child.nodeType === 1) {
        currentNode.children.push(await collectAllNodes(child.nodeId));
      }
    }
  }

  return currentNode;
}

// 调用即可拿到完整的可遍历元素树
const fullElementTree = await collectAllNodes(root.nodeId);

形式2：包含所有iframe内容的完整DOM文本表示

直接对根节点调用DOM.getOuterHTML拿到的主文档HTML中，iframe标签默认是空标签形态，和Elements面板未展开iframe时的展示一致。如果需要全展开所有iframe的文本内容，只需要在遍历节点树时，把每个iframe对应contentDocument的序列化HTML，插入到对应iframe标签的闭合位置即可，最终拼接出的文本和Elements面板全展开所有节点的展示内容完全匹配。

注意事项 #

• 内容拉取完成后如果不需要调试能力，可调用mainWin.webContents.debugger.detach()断开调试连接，避免和手动打开的DevTools产生占用冲突。
• 如果页面存在动态渲染、异步加载的内容，监听CDP的DOM.documentUpdated事件，事件触发后重新拉取DOM树即可拿到最新内容。
• 该方案拿到的DOM内容是Chromium解析后的标准化结果，自动补全缺失的闭合标签、修正不规范的属性格式，和Elements面板展示内容无差异。

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