如何获得完全计算的 HTML（而不是源 HTML）？

Question

给定一个使用大量 javascript 生成 HTML 的网页，我怎样才能获得由浏览器解析的最终计算 HTML 而不是源 HTML？换句话说，假设一个页面有很多围绕 javascript 函数的标签，这些函数在被调用时会返回一些 HTML。当我查看页面源代码时，我看到的是脚本函数调用，而不是它生成的 HTML。

如何获取网页生成的所有 HTML？

我注意到 Firebug 似乎能够看到 HTML 而不是脚本，但它似乎没有任何方法来保存整个页面，只能保存其中的一小部分。

更新：

感谢所有的答案。但是，我仍然无法使用这些技术获得在 Firebug 控制台中看到的 HTML。对于我的示例页面，我使用我自己的 Facebook 个人资料的“信息”选项卡。如果您在该页面上查看源代码，您将看到许多标题为“big_pipe.onPageletArrive()”的脚本。但是，如果您在 Firebug 中查看它，您会发现每个函数调用都会呈现为 HTML。我尝试了在 Firebug 中右键单击标签、在 Webdev 工具栏中查看生成的源代码以及 Chrome 建议，但它们都给了我脚本调用，而不是 HTML。

还有其他想法吗？

更新 2：

当我说这些函数中的每一个都在 Firebug 中呈现为 HTML 时，我不太正确。仅当我在页面中选择它们并右键单击 -> 检查元素时，它们才会呈现。然后它似乎将其渲染出来。所以也许我的问题变成了如何让 Firebug 自动渲染出所有 HTML，以便您可以选择并保存它？ （或者我愿意接受任何其他解决方案来获取此 HTML）。

Answer 1

使用 Firebug 的 HTML 选项卡，您可以右键单击 元素，然后单击“复制 HTML”。

您可以使用 Chrome/Safari 中的开发人员工具执行相同的操作。

Answer 2

Firefox 的Web 开发人员工具栏有一个提供此功能的“查看生成的源代码”选项。

Answer 3

with (window.open("")) {
    document.open("text/html");
    document.write("<!--\n"); //for live version delete this line
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
    document.write("\n//-->"); //for live version delete this line
    document.close();
    document.title = "DOM Snapshot:" + opener.document.title;
    focus();
}

1. 打开控制台
2. 复制粘贴上面的代码并执行
3. 它会打开一个空页面，
4. 现在用右键单击或 f12 检查页面，
5. 将评论的 externalhtml 复制粘贴
6. 到您想要的任何位置，
7. 可选择删除开头和结尾的评论

如果您想要一个实时版本，是可点击的，然后简单地省略上面代码中的注释标签。

Answer 4

我在使用 Javascript 生成的页面时遇到问题：只有向下滚动页面，内容才会呈现，因此复制的 HTML 不完整。所有基于 Chrome 的建议都发生在我身上。

这个问题是通过以下技巧解决的：

1. 打开控制台，然后输入将呈现整个页面（或所需内容）的缩放，例如

javascript: document.body.style.zoom = 0.1

2. 按照其他建议复制 HTML，例如

copy(document.querySelector('html').outerHTML)

3. 粘贴时，在文本中搜索“缩放”，然后将值恢复为“1”，保存 HTML。

Answer 5

document.getElementById('awesomeness').textContent = document.documentElement.outerHTML.replace(/<\/\w+>/g, (e) => e + '\r\n');

<div id="awesomeness" style="overflow:scroll;width:100%;height:100%;white-space:pre;"/>

所以是的，用那个...

Answer 6

一般情况下是不可能的。以下是我的书签的摘录，它依赖于非标准 outerHTML：

with (window.open("")) {
    document.open("text/html");
    document.write("<PRE>");
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
    document.write("</PRE>");
    document.close();
    document.title = "DOM Snapshot:" + opener.document.title;
    focus();
}

注意：DTD 丢失并且根本无法检索。