Chrome 开发工具导出元素 HTML

Question

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

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

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

Answer 1

Select 顶部节点并选择 "Copy"。不过，您必须 re-add Doctype。

或者，您可以单击 "edit as HTML" 并从那里复制它。

Answer 2

您可以尝试以下方法：

您只需右键单击该元素并复制 outerHTML。

Answer 3

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

我找到了一种更好的方法来将当前的 dom 树转储到 html 文件（以在 element 选项卡中保留对 dom 树的更改） ,只需将下面的代码粘贴到控制台，就会下载一个 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。我会开发一个扩展，以便稍后使点击转储功能正常。

Chrome 开发工具导出元素 HTML

Chrome Dev Tools export Elements HTML

html

google-chrome-devtools

chromium-embedded