Chrome Dev工具导出元素HTML
Chrome Dev工具导出元素HTML
提问于 2015-01-26 21:54:51
为了调试我的chromium-embedded应用程序，我正在寻找一个函数，以便从chrome开发人员工具中获得网页的源代码。我基本上希望在'Elements‘标签中显示的HTML树，实际的HTML DOM，作为HTML文本。此功能是否存在？我怎么使用它？
因为我使用CEF，所以我只有chrome dev工具可用，而不是完整的浏览器。我不能使用右键单击上下文菜单，因为我希望看到当前操作的DOM，而不是原始源。
我想将此功能用于调试目的，以便可以比较两个不同的HTML树。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-01-26 22:14:25
选择顶部节点，然后选择“复制”。不过，您必须重新添加Doctype。
或者，您可以单击“编辑为HTML”并从那里复制它。
Stack Overflow用户
发布于 2018-08-11 00:09:39
您可以尝试以下操作：
您所要做的就是右键单击该元素并复制outerHTML。
Stack Overflow用户
发布于 2021-04-07 08:41:27
更新：扩展已经发布！命名转储Dom
我找到了一种更好的方法来将当前的dom树转储到一个dom.html文件中(将您的更改持久化到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。稍后，我会开发一个扩展来实现点击转储功能。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28151446
复制相关文章
相似问题
腾讯云开发者
