40

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

在 Firefox 中执行此操作已经有了答案，但我如何在 Chrome 中执行此操作？

4

4 回答 4

52

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

于 2013-02-07T18:29:27.653 回答
8

命令行解决方案

使用较新版本的 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 version 1.10.3, build 20f81dd

Mac OS X 塞拉利昂

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 version 17.06.1-ce, build 874a737

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

于 2017-09-19T21:35:14.970 回答
7

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

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

于 2020-04-27T13:53:49.370 回答
5

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

于 2016-10-26T18:10:35.390 回答