如何在Chrome中以当前状态转储整个Web DOM？

我想将当前DOM转储到一个文件中，并能够脱机查看它。基本上，我有一个过时的页面版本，我想保留下来进行比较。一旦我关闭浏览器，我将丢失它，因此我希望完全按照原样保存DOM

---

在Chrome中，只有一种方法可以做到这一点。

使用Web检查器（F12），转到“元素”选项卡，右键单击代码中的

标记，然后选择

Copy

->

Copy outerHTML

。然后将其粘贴到新文件并保存。

我目前使用的是53.0.2785.113 m版Chrome。其他答案似乎不再有效。要正确复制所有子元素/子元素，用户现在必须右键单击

，然后在复制之前单击“全部展开”。另一方面，您不会递归地复制所有元素。正常的Ctrl+C组合键将复制已展开的所有内容。

命令行解决方案 对于较新版本的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

Docker version 17.06.1-ce, build 874a737

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 1.10.3, build 20f81dd

Docker version 17.06.1-ce, build 874a737

---

如果您安装了

tidy

，您也可以缩进HTML。

在Chrome开发工具控制台中，键入

document.documentElement.outerHTML

（使用自动完成选项卡按钮保存击键），然后按Enter键查看显示的DOM文本。要将其复制到剪贴板并粘贴到其他位置，请改用

copy（document.documentElement.outerHTML）

---

Damon的回答也很好（在开发工具中，单击元素，右键单击

，单击复制>复制outerHTML），但我发现控制台命令更容易。

我在发布时这样做了，但我认为这不是完美的解决方案是有原因的。我想我想在DOM上保存事件处理程序，而HTML转储不这样做。@styfle不确定我是否理解这一点。当您点击F12时，我看到的是呈现的（正确的措辞？）HTML，而不是“查看页面源代码”将提供给您的基本转储。我听从了Damon的建议，得到了我所需要的一切（一个由jquery填充的选择框）。这仍然是一种非常笨拙的方法，从元素页面简单地选择所有元素会更加直观。只是“复制”而不是“复制为HTML”就可以了。然后粘贴到记事本中。这确实会提供生成的HTML，而“另存页面为”菜单项只提供源HTML，这对使用Ajax内容的网站没有帮助。过时，不再有效。我看不出有任何问题。你知道docker是什么吗？

--dump dom

的问题是如何保存当前dom，而不是初始页面加载时得到的dom，这在现代网站上几乎可以保证完全不同，因为JS注入了初始页面加载中缺失的一百万项内容。当然，正如styfle提到的，这不会在DOM上保存事件处理程序。这是否回答了您的问题？这是否回答了您的问题？