如何将Chrome DevTools Protocol的DOMSnapshot.captureSnapshot快照转为HTML？

DOMSnapshot.captureSnapshot的返回是结构化的压缩数据，所有字符串（标签名、属性值、文本等）都存在strings数组中，通过索引引用。要转成HTML，需要解析节点层级、属性和文本，再拼接成完整的HTML结构，步骤如下：

核心逻辑说明 #

快照的核心结构：

• documents：包含页面的文档数据，每个文档里有nodes（DOM节点数组）、attributes（属性键值对的索引数组）、texts（文本节点的内容范围）
• strings：全局字符串池，所有字符串类型的字段都用索引指向这里的元素

具体转换步骤 #

1. 构建节点父子关系：遍历nodes数组，根据每个节点的parentIndex（父节点在nodes中的索引），建立节点的层级映射
2. 解析元素节点：对每个元素节点（nodeType=1），从strings中取标签名，再从attributes数组中提取属性名和值
3. 解析文本节点：对每个文本节点（nodeType=3），根据texts数组里的textIndex、start、length，从strings中截取对应文本内容
4. 递归拼接HTML：从根节点（parentIndex=-1）开始，递归将子节点（元素或文本）嵌套到父元素中，同时转义HTML特殊字符
5. 生成最终HTML：将所有根节点的HTML拼接起来，得到完整页面的HTML

实用代码示例（JavaScript） #

function snapshotToHtml(snapshot) {
  const { documents, strings } = snapshot;
  if (!documents.length) return '';
  
  const doc = documents[0];
  const { nodes, attributes, texts } = doc;
  const nodeMap = nodes.map(() => ({ children: [] }));

  // 建立父子节点映射
  nodes.forEach((node, index) => {
    if (node.parentIndex !== -1) {
      nodeMap[node.parentIndex].children.push(index);
    }
  });

  // 转义HTML特殊字符
  const escapeHtml = (str) => {
    return str.replace(/&/g, '&')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;')
              .replace(/"/g, '&quot;');
  };

  // 递归构建单个节点的HTML
  const buildNode = (nodeIndex) => {
    const node = nodes[nodeIndex];
    switch (node.nodeType) {
      // 元素节点
      case 1: {
        const tagName = strings[node.tagNameIndex].toLowerCase();
        const attrs = [];
        // 遍历当前节点的所有属性（attributes是[nameIndex, valueIndex]的成对数组）
        for (let i = node.attributesIndex; i < node.attributesIndex + node.attributesLength; i += 2) {
          const attrName = strings[attributes[i]];
          const attrValue = escapeHtml(strings[attributes[i + 1]]);
          attrs.push(`${attrName}="${attrValue}"`);
        }
        const attrStr = attrs.length ? ` ${attrs.join(' ')}` : '';
        // 拼接子节点的HTML
        const childrenHtml = nodeMap[nodeIndex].children.map(buildNode).join('');
        return `<${tagName}${attrStr}>${childrenHtml}</${tagName}>`;
      }
      // 文本节点
      case 3: {
        const textEntry = texts.find(t => t.nodeIndex === nodeIndex);
        if (!textEntry) return '';
        const rawText = strings[textEntry.textIndex];
        const textContent = rawText.substring(textEntry.start, textEntry.start + textEntry.length);
        return escapeHtml(textContent);
      }
      // 可扩展处理注释、DOCTYPE等其他节点类型
      default:
        return '';
    }
  };

  // 从所有根节点开始构建
  const rootNodes = nodes.filter(node => node.parentIndex === -1);
  return rootNodes.map(buildNode).join('');
}

注意事项 #

• 调用captureSnapshot时，确保请求了完整的节点数据：比如使用DOMSnapshot.captureSnapshot({computedStyles: [], includeDOMRects: false})，避免遗漏nodes、attributes等关键字段
• 部分快照可能包含多个文档（比如iframe），需要遍历documents数组分别处理
• 若快照中包含样式或布局数据，如需还原样式，可结合computedStyles字段补充到HTML的style属性中

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