【问题标题】：How can I dump the entire Web DOM in its current state in Chrome?如何在 Chrome 中以当前状态转储整个 Web DOM？
【发布时间】：2012-08-22 05:42:24
【问题描述】：

我想将当前的 DOM 转储到一个文件中并能够离线查看它。本质上，我有一个过时的页面版本，我想保留它以进行比较。一旦我关闭浏览器，我就会丢失它，所以我想按原样保存 DOM。

有already an answer for doing this in Firefox，但我如何在 Chrome 中做到这一点？

【问题讨论】：

这个答案能解决你的问题吗？stackoverflow.com/questions/28151446/…
这能回答你的问题吗？ Chrome Dev Tools export Elements HTML

标签： dom dump google-chrome-devtools

【解决方案1】：

使用 Web Inspector (F12)，转到 Elements 选项卡，右键单击代码中的 <html> 标签并选择 Copy->Copy outerHTML。然后将其粘贴到新文件中并保存。

【讨论】：

我在发帖时这样做了，但我认为这不是完美的解决方案是有原因的。我想我想在 DOM 上保存 HTML 转储不做的事件处理程序。
@styfle 不确定我是否理解这一点。当您按 F12 时，我看到的是呈现的（正确的措辞？）HTML，而不是“查看页面源”将为您提供的基本转储。我听从了 Damon 的建议，得到了我需要的一切（一个由 jquery 填充的选择框）。这仍然是一种非常笨拙的方法，从元素页面中简单的全选会更直观。
只需“复制”而不是“复制为 HTML”就可以了。然后粘贴到记事本中。
这确实会为您提供 GENERATED HTML，这与“另存为”菜单项不同，它只为您提供 SOURCE HTML，这对使用 Ajax 作为内容的站点没有帮助。跨度>
过时，不再有效。

【解决方案2】：

我目前使用的 Chrome 版本为 53.0.2785.113 m。其他答案似乎不再有效。要正确复制所有子/后代元素，用户现在必须右键单击<html>，然后在复制前单击“全部展开”。否则，您将不会递归复制所有元素。普通的 Ctrl+C 将复制 <html> 已展开的所有内容。

【讨论】：

【解决方案3】：

命令行解决方案

使用较新版本的 Chrome 很容易做到这一点：

google-chrome --headless --dump-dom 'http://www.yahoo.com'

（OP 可能没有在寻找命令行解决方案，但搜索时此搜索结果显示很高，因此其他人可能会觉得它有用）

2017 年原答案

我最喜欢的做法是：

docker run -it --rm --name chrome --shm-size=1024m --cap-add=SYS_ADMIN --entrypoint=/usr/bin/google-chrome-unstable yukinying/chrome-headless-browser --headless --disable-gpu --dump-dom https://www.facebook.com

如果您不熟悉 Docker 的工作原理，请耐心等待 - 第一次会很慢，但后续调用会很快。

其他信息

测试于

Ubuntu 16

Linux intel-nuc 4.4.0-21-generic #37-Ubuntu SMP Mon Apr 18 18:33:37 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux

Docker 版本：

Docker version 1.10.3, build 20f81dd

Mac OS X Sierra

Darwin MacBook-Pro.local 16.7.0 Darwin Kernel Version 16.7.0: Thu Jun 15 17:36:27 PDT 2017; root:xnu-3789.70.16~2/RELEASE_X86_64 x86_64 i386 MacBookPro14,3 Darwin

Docker 版本：

Docker version 17.06.1-ce, build 874a737

如果你安装tidy，你也可以缩进HTML。

【讨论】：

我看不出有什么问题。你知道 docker 是什么吗？
--dump-dom 的问题在于如何保存当前的 DOM，而不是您在初始页面加载时获得的 DOM，由于 JS 注入，现代网站几乎可以保证完全不同初始页面加载中缺少一百万个内容。

【解决方案4】：

在 Chrome 开发工具控制台中，输入 document.documentElement.outerHTML（使用选项卡按钮自动完成以保存击键）并按 Enter 以查看显示的 DOM 文本。要将其复制到剪贴板并粘贴到其他位置，请改用copy(document.documentElement.outerHTML)。

Damon 的回答也不错（在 Dev Tools 中，点击 Elements，右键<html>，点击 Copy > Copy outerHTML），但我发现 Console 命令更简单。

【讨论】：

当然，正如 styfle 所提到的，这不会将事件处理程序保存在 DOM 上。