Chrome 开发工具导出元素 HTML

Posted 2023-03-07

【中文标题】Chrome 开发工具导出元素 HTML

【英文标题】：Chrome Dev Tools export Elements HTML

【发布时间】：2015-03-24 22:39:42

【问题描述】：

为了调试我的chromium-embedded 应用程序，我正在寻找一个函数来从chrome 开发人员工具中获取网页的源代码。我基本上希望“元素”选项卡中显示的 html 树，即实际的 HTML DOM，作为 HTML 文本。这个功能存在吗？我该如何使用它？

当我使用 CEF 时，我只有 chrome 开发工具可用，而不是完整的浏览器。我无法使用右键单击上下文菜单，因为我想查看当前操作的 DOM 而不是原始源。

我想将此功能用于调试目的，以便区分两种不同的 HTML 树。

【参考方案1】：

选择顶部节点并选择“复制”。不过，您必须重新添加 Doctype。

或者，您可以点击“编辑为 HTML”并从那里复制。

【讨论】：

谢谢。就是这么简单。难怪我没有用谷歌找到它。我怎么看不到这个菜单...

【参考方案2】：

您可以尝试以下方法：

您所要做的就是右键单击该元素并复制outerHTML。

【讨论】：

@Suncatcher 不完全确定，但我认为是这样。也许您可以再次执行类似 document.getElementById("id going here").outerHTML 之类的操作，不确定但必须有办法。

【参考方案3】：

更新：扩展已经发布！命名为Dump Dom chrome store github source

我找到了一种将当前 dom 树转储到 html 文件的更好方法（将您对 dom 树的更改保留在 element 选项卡中），只需将以下代码粘贴到控制台和 dom.html 文件将被下载。

filename = "dom";
var html = '',
  node = document.firstChild
while (node) 
  switch (node.nodeType) 
    case Node.ELEMENT_NODE:
      html += node.outerHTML
      break
    case Node.TEXT_NODE:
      html += node.nodeValue
      break
    case Node.CDATA_SECTION_NODE:
      html += '<![CDATA[' + node.nodeValue + ']]>'
      break
    case Node.COMMENT_NODE:
      html += '<!--' + node.nodeValue + '-->'
      break
    case Node.DOCUMENT_TYPE_NODE:
      // (X)HTML documents are identified by public identifiers
      html +=
        '<!DOCTYPE ' +
        node.name +
        (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '') +
        (!node.publicId && node.systemId ? ' SYSTEM' : '') +
        (node.systemId ? ' "' + node.systemId + '"' : '') +
        '>\n'
      break
  
  node = node.nextSibling



var file = new Blob([html], 
  type: 'text/html'
);
if (window.navigator.msSaveOrOpenBlob) // IE10+
  window.navigator.msSaveOrOpenBlob(file, filename);
else  // Others
  var a = document.createElement("a"),
    url = URL.createObjectURL(file);
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  setTimeout(function () 
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  , 0);

灵感来自这个项目：https://github.com/wingleung/save-page-state。 而且我会开发一个扩展功能，以便稍后实现点击转储功能。