Chrome开发者工具导出元素HTML

Question

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

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

我想使用这个功能进行调试，以便我可以比较两个不同的HTML树。

- Sjoerd222888

Answer 1

选择顶级节点并选择“复制”。虽然您需要重新添加Doctype。

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

- Sebb

---

谢谢。这太简单了。难怪我在谷歌上没找到它。我怎么可能没看到这个菜单... - Sjoerd222888

Answer 2

你可以尝试以下方法：

你所需要做的就是右键点击该元素，然后复制outerHTML。

- G. LC

---

@Suncatcher 我不是完全确定，但我认为是这样的。也许你可以像这样做：document.getElementById("id goes here").outerHTML 再次确认一下，但肯定有办法的。 - G. LC

Answer 3

更新：已发布扩展！名为Dump Dom
Chrome 商店
GitHub 源代码

我发现了一种更好的方法，可以将当前的 DOM 树导出到一个 HTML 文件中(以保留在“元素”选项卡中对 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。 稍后我将开发一个扩展程序，使on-click-dump功能有效。

- 傅继晗