截取屏幕截图

您可以使用开发者工具截取整个页面或页面中单个元素的屏幕截图。

截取页面屏幕截图

使用屏幕截图图标： 截取当前页面的全页面屏幕截图。

默认情况下，屏幕截图图标未启用。要启用它

• 访问设置 页面

• 找到标记为“可用工具箱按钮”的部分

• 选中标记为“截取整个页面的屏幕截图”的复选框。

您现在将在工具栏中看到该图标

点击该图标以截取当前页面的屏幕截图。屏幕截图将保存到浏览器的“下载”目录中

截取元素屏幕截图

要截取页面中单个元素的屏幕截图，请在检查器 HTML 面板 中该元素上激活上下文菜单，然后选择“截图节点”。屏幕截图将保存到浏览器的“下载”目录中

将屏幕截图复制到剪贴板

从 Firefox 53 开始，您还可以将屏幕截图复制到剪贴板。只需选中设置中标记为“将屏幕截图复制到剪贴板”的复选框即可

现在，无论何时截取屏幕截图，屏幕截图也会复制到剪贴板。

使用 Web 控制台截取屏幕截图

如果您需要指定不同的设备像素比、在截取屏幕截图之前设置延迟或指定您自己的文件名，从 Firefox 62 开始，您可以在Web 控制台 中使用:screenshot 辅助函数。

在 Web 控制台中键入:screenshot 以创建当前页面的屏幕截图。默认情况下，图像文件将命名为Screen Shot yyy-mm-dd at hh.mm.ss.png。

注意

提示：您可以键入:s，然后按Tab 以自动完成:screenshot。

该命令具有以下可选参数

命令	类型	描述
--clipboard	布尔值	如果存在，此参数将导致屏幕截图被复制到剪贴板。除非您使用--file 选项强制写入文件，否则将阻止保存到文件。
--delay	数字	截取屏幕截图之前的延迟秒数；您可以使用整数或浮点数。如果您想弹出菜单或为屏幕截图调用悬停状态，这很有用。
--dpr	数字	截取屏幕截图时要使用的设备像素比。大于 1 的值会产生“放大”的图像，而小于 1 的值会创建“缩小”的图像。
--file	布尔值	如果存在，即使包含其他选项（例如--clipboard），屏幕截图也将保存到文件中。
--filename	字符串	保存文件时要使用的名称。文件应具有“.png”扩展名。
--fullpage	布尔值	如果包含，则将保存整个网页。使用此参数，即使在窗口当前边界之外的网页部分也将包含在屏幕截图中。使用时，“<span style=”white-space: nowrap;”>-fullpage</span>” 将附加到文件名。
--selector	字符串	选择页面上单个元素的 CSS 选择器。提供时，只有此元素及其后代将包含在屏幕截图中。

注意

如果您将图像捕获到类似test.png 的文件名中，然后您捕获到相同的文件名，则新图像将覆盖旧图像。因此，如果您使用向上箭头历史记录滚动快速连续捕获图像，请小心 - 您需要记住为每个新捕获更改文件名。

注意

感谢 Eric Meyer 对我们的屏幕截图功能的热情和帮助！本节的一小部分内容借鉴了他的Firefox 的 :screenshot 命令 文章。