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

Question

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

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

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

对于滚动的长网页，执行此任务是微不足道的。但是，当它包含滚动的页面中的单个元素时，如何实现呢？

需要明确的是，我需要捕获整个页面，而不仅仅是元素本身。

我想在 Windows 上使用 Firefox 来完成此操作。

Answer 1

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

只需弹出开发者工具→查找元素→右键单击并截屏

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

OP 编辑​​后更新：

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

它会将大量 DOM 元素推出视口和屏幕截图，或者 AFAIK 任何其他工具都无法捕获它，我认为这超出了您的目的。

从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 Developer Tools 菜单中选择它。

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

要捕获单个元素，您可以将其 css 选择器与 --selector 标志一起使用，例如

screenshot --selector #hot-network-questions

会给你下面的图片

Answer 3

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

Answer 4

有一种叫做Snagit 的软件可以解决您的问题。该软件可以拍摄不同类型的屏幕截图，如滚动窗口，也可以录制视频。

这是一个付费应用程序，但也有试用版。

Answer 5

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

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

Answer 6

将所有内容都放在一页上的选项：

• 用于<Ctrl>-将所有内容放在一页上
• 将屏幕旋转至纵向模式
• 在纵向模式下使用第二个屏幕并将其置于第一个屏幕下方
• 结合以上所有内容

另一种选择是截取您想要捕获的内容的上半部分。向下滚动，拍摄下一个屏幕截图。重复此操作，直到捕获所有内容。
可选：使用图像编辑器（例如 gimp）将屏幕截图合并为一张大图像。