Chrome开发者工具导出元素HTML

Question

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

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

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

Answer 1

选择顶部节点，然后选择“复制”。但是，您必须重新添加Doctype。

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

Answer 2

更新：扩展已经发布！命名为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。 我会开发一个扩展程序，以便稍后让点击转储功能发挥作用。

Answer 3

您可以尝试以下操作：

所有您需要做的就是右键单击该元素，然后复制externalHTML。