使用 Devtools 截取页面屏幕截图

有时，我需要向客户或团队成员展示网站当前状态的完整屏幕截图，甚至是网站的一部分，因此我一直在使用全页屏幕截图，对于任何其他类型的屏幕截图，我使用Windows 片段工具 或 Snaggit。如果我想像这篇文章 Gyazo 那样在线托管它，它也有一个 GIF 制作器。

最近发现Devtools有一个可以全屏截图的工具，不需要扩展！

这不是新想法，它已包含在 2017 年 4 月的 Devtools 更新 中，但看起来我住在岩石下，直到现在才发现……

开发工具

正如官方 Devtools 页面 中所述：

Chrome DevTools 是一组直接内置于 Google Chrome 浏览器中的 Web 开发人员工具。 DevTools 可以帮助您即时编辑页面并快速诊断问题，最终帮助您更快地构建更好的网站。

在 Devtools 中运行命令

您已经知道如何打开 Devtools，但如果您忘记了并且为了本文的目的，请使用键 F12 或快捷方式 Ctrl + Shift + I 打开它。然后您必须打开 Devtools 内菜单中的 Run command 或使用 Ctrl + Shift + P。

截图工具

如果您输入screenshot，它将过滤命令，您可以使用 4 种类型的屏幕截图方法：

1.区域截图 2.全尺寸截图 3.节点截图 4. 截图

在检查所有截图方法之前，devtools处理完图像后，会自动以网页名称下载。

区域截图

area screenshot 将让您选择网站的一部分并进行屏幕截图。

结果：

全尺寸截图

full size screenshot 将从头到尾截取整个网页的屏幕截图。

结果：

节点截图

node screenshot 将让您制作检查元素中选定节点的屏幕截图。

结果：

捕获屏幕截图

capture screenshot 将在不滚动的情况下截取当前页面的屏幕截图以及浏览器的大小。

结果：