如何获得完全计算的HTML(而不是源HTML)？

Question

如何获得完全计算的HTML(而不是源HTML)？

给定一个使用大量javascript来生成HTML的网页,如何让浏览器而不是源HTML解析最终计算的HTML？换句话说,假定一个页面有许多围绕javascript函数的标签,当被调用时,返回一些HTML.当我查看页面的源时,我看到脚本函数调用,而不是它生成的HTML.

我怎样才能获得网页生成的所有HTML？

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

更新:

感谢所有的答案.但是,我仍然没有使用任何这些技术获取我在Firebug控制台中看到的HTML.对于我的示例页面,我正在使用我自己的Facebook个人资料的"信息"标签.如果您在该页面上查看源代码,您将看到许多标题为"big_pipe.onPageletArrive()"的脚本.但是,如果您在Firebug中查看它,那么每个函数调用都会呈现为HTML.我尝试右键单击Firebug中的标记,Webdev工具栏中的View Generated Source和Chrome建议,但它们都给了我脚本调用,而不是HTML.

还有其他想法吗？

更新2:

当我说每个函数在Firebug中呈现为HTML时,我都不太正确.如果我在页面中选择它们并右键单击 - >检查元素,它们只会渲染出来.然后它似乎将其渲染出来.所以也许我的问题变成了如何让Firebug自动渲染出所有HTML,以便您可以选择并保存它？(或者我可以使用其他任何解决方案来获取此HTML).

Answer 1

thi*_*dot 24

使用Firebug的HTML选项卡,您可以右键单击该<html>元素,然后单击"复制HTML".

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

在Chrome的控制台中,您可以使用:`copy(document.querySelector('html').innerHTML)`.这会将"计算"的HTML复制到剪贴板. (5认同)
奇怪的是在Mac上的Chrome,Safari和Firefox中,我看到了生成的html,但是当我选择"复制html"时,它会复制预先生成的html.我希望这只是一个bug. (4认同)
@thirtydot 这也适用于 FF。但是，outerHTML 更合适，因为您还需要 <html> 标签。`复制(document.querySelector('html').outerHTML)` (3认同)
这是我最初尝试但它不起作用的部分:缺少部分.使用元素检查器显示"隐藏了一些元素[按钮:加载所有161个元素]".点击它没有任何区别:它没有复制它.最终使用当前-4票(即4个downvotes)的答案修复它. (2认同)

Answer 2

Geo*_*ins 14

Firefox 的Web Developer Toolbar有一个"View Generated Source"选项,可以提供此功能.

有趣的事实:通过使用ctrl + a选择页面上的所有文本并从上下文菜单中选择"查看选择源",可以实现相同或类似的效果.实际上,当您单击Web开发人员工具栏上的"查看生成的源"按钮时,它实际上会选择页面上的所有文本,因此它可能是相同的! (7认同)

归档时间：	14 年，4 月前
查看次数：	27342 次
最近记录：	6 年前