获取javascript呈现页面的html（与之交互后）

Question

我希望能够在与之交互后保存html页面的状态。

假设我单击一个复选框，或者javascript设置了各种元素的值。

如何保存“javascript-rendered”页面？

感谢。

Answer 1

在Chrome（显然是Firefox）中，有一种特殊的copy（）方法可以将呈现的内容复制到剪贴板。然后，您可以通过将其粘贴到首选文本编辑器来执行任何操作。

https://developers.google.com/chrome-developer-tools/docs/commandline-api#copyobject

控制台示例：

copy(document.body.innerHTML);

注意：我注意到在运行该方法后Chrome报告未定义，但是，它似乎正确执行并且正确的内容位于剪贴板中。

Answer 2

应该这样做并且将抓住ALL页面而不仅仅是身体

console.log(document.getElementsByTagName('html')[0].innerHTML);

Answer 3

document.body.innerHTML将为您提供当前文档正文的HTML表示形式。

这不一定包括DOM对象的所有内部状态，因为HTML包含对象的初始默认状态，不一定是它们可能已被更改为的状态。保证获得所有状态的唯一方法是列出要保存的状态并实际以编程方式获取该状态。

要回答有关保存问题的部分问题，您必须详细说明您真正要解决的问题。

Answer 4

要获得与查看源代码等价的javascript渲染，包括doctype和html标签，请将命令复制到chrome控制台：

console.log(new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML);

在chrome控制台中，将鼠标悬停在输出的末尾，然后单击复制链接以复制到粘贴板。