Chrome 开发者工具自带截图命令，轻松截取复杂网页

之前试用 Firefox Quantum 时，我最喜欢的功能之一就是其内置的截图功能，它不仅能自动检测网页元素的边界，还能轻松保存整个网页，非常方便。

后来因为扩展和习惯的原因，我又换回了 Chrome，但还是很怀念这个功能。虽然商店里有很多截图增强扩展，但在截取一些比较复杂的网页时，元素经常会错位、重复。经过一番探索，我发现 Chrome 开发者工具其实内置了截图命令，而且效果也令人满意。这里分享给大家。

要使用截图功能，首先需要确保 Chrome 已升级到 59 或更高版本。在要截图的网页上，首先按 ⌘Command + ⌥Option + I（Windows 上为 F12）快捷键调出调试界面。

然后按下 ⌘Command + ⇧Shift + P（Windows 为 Ctrl + Shift + P），输入命令 Capture full size screenshot（只需输入前几个字母即可找到），按回车，Chrome 就会自动截取整个网页内容并保存到本地。因为是直接由渲染引擎输出，所以比普通的扩展程序速度更快，分辨率也更高。

除了普通的长截图外，你还可以使用此功能截取移动网页的长截图。只需按 ⌘ Command + ⇧ Shift + M（Windows 为 Ctrl + Shift + M）即可模拟移动设备，然后像以前一样运行命令。在顶部的工具栏中，你可以选择要模拟的设备以及分辨率和其他设置。

如果要截取网页的某个特定部分，可以按 ⌘ Command + ⇧ Shift + C（Windows 上为 Ctrl + Shift + C）来嗅探元素。选择所需部分后，运行 Capture node screenshot 命令，完美选择的截图就诞生了。

此外，Capture screenshot 命令允许你截取当前网页的可见部分。我会继续探索 Chrome 开发者工具的其他有趣用途，并推荐给大家。