如何在 Firefox 中截取包含网页内滚动元素的屏幕截图？

Question

我需要截取整个网页的屏幕截图。诀窍是我需要屏幕截图包含屏幕容纳不下的单个元素的全部内容。

它是一个单列表，由于高度原因带有滚动条。它不是 IFRAME（在自己的选项卡中加载起来很简单）。

该列包含格式化的文本和一些小图像。

对于滚动的长网页来说，执行此任务很简单。但是当页面中包含滚动的单个元素时，该如何完成呢？

为了清楚起见，我需要捕获整个页面，而不仅仅是元素本身。

我想使用 Windows 上的 Firefox 实现这一点。

Answer 1

我的建议是使用Firefox 的内置功能它允许您截取单个 DOM 元素的屏幕截图。

只需打开开发者工具 → 找到元素 → 右键单击​​并截取屏幕截图

它在我的一个内部站点上不起作用，所以不能说它对所有站点都起作用。

OP 编辑​​后更新：

如果你打算记录整个页面以及整个 DOM 元素内容（如下所示），则应该实时编辑 DOM 元素的高度但...

它会将许多 DOM 元素推出视口，并且屏幕截图或据我所知任何其他工具都无法捕获它，我认为这违背了你的目的。

请参阅下文https://en.wikipedia.org/wiki/Screenshot

屏幕截图、屏幕捕获、屏幕截图、屏幕截图、屏幕转储或截屏是人们为记录显示器、电视或其他正在使用的视觉输出设备上显示的可见内容而拍摄的图像。

如果我真的必须按照你的方式去做，我要么创建一个 GIF，要么截取两张屏幕截图，一张是整页，另一张只截取 DOM 元素，然后合并为一张。

Answer 2

2021年编辑

工具栏已从 FF 中删除。但您仍然可以通过在控制台中键入前缀为 的命令来访问这些命令:。因此，对于屏幕截图，请使用

:screenshot --fullpage fullpage.png

或者

:screenshot --selector #hot-network-questions fullpage.png

旧答案

您可以使用开发人员工具栏中的屏幕截图命令：

1. 按Shift+F2打开工具栏或从 Web 开发人员工具菜单中选择它。

2. 在工具栏中，键入命令screenshot --fullpage fullpage.png。

要捕获单个元素，你可以使用带有 --selector 标志的 css 选择器，例如

screenshot --selector #hot-network-questions

会得到下面的图片

Answer 3

使用 Firefox 的响应式设计模式，将宽度设置为正常值，高度设置为足以覆盖整个页面。然后点击截图按钮（相机图标）。

Answer 4

我用屏幕压印。它允许您截取滚动屏幕截图。基本上，您截取一个屏幕截图，向下滚动并截取另一个，依此类推，然后 Screenpresso 将它们拼接在一起。Screenpresso 也是免费的。

仅供参考，滚动截图的快捷键是 WindowsKey+Shift+PrintScreen。然后您需要单击要滚动的窗口。当您到达要截图的下一部分时，右键单击，向下滚动，右键单击等等。完成后，单击左键，它们将拼接在一起。确保每个截图都有一些重叠，以便拼接过程更好地进行。