在工作中,我们难免需要给一些网页截图。也许你尝试过各种插件,或者是使用过一些截图工具,但其实,Chrome 本身就带有截图特性,功能还很丰富。它不仅可以截取浏览器窗口,还可以截取网页全图,截取移动端显示效果,甚至带壳截图。

那么 Chrome 的截图该怎么用呢?让我给你详细地介绍一下吧。

截图指令

Chrome 的截图功能藏在开发者工具中,所以在截图之前你需要先打开开发者工具。我们可以直接在页面上按下鼠标右键,选择「检查」(或「审查元素」),也可以按下 Cmd+Option+I(Windows 下是 Ctrl+Shift+I),来打开开发者工具。

Chrome 开发者工具
Chrome 开发者工具

在浏览器窗口底部弹出的面板就是开发者工具啦。此时,我们继续按下 Cmd+Shift+P(Windows 下是 Ctrl+Shift+P)打开指令输入框,在里面输入 screenshot,就可以看到四个截图相关的指令了。

指令输入框
指令输入框

这四个指令分别对应着:

  • Capture area screenshot:区域截图,截取网页的一个区域。
  • Capture full size screenshot:全网页截图,截取整个网页。
  • Capture node screenshot:节点截图,截取网页中的一个元素节点。
  • Capture screenshot:窗口截图,截取当前浏览器窗口显示的内容。

区域截图

我们按上下方向键选取第一个指令(Capture area screenshot)并回车,此时移动鼠标至网页中,光标变为十字形。此时,你就可以在网页中划出一个区域来进行截图了。当你划完范围松开鼠标时,Chrome 就会自动保存刚才的截取的区域图片了。

全网页截图

全网页截图,是指 Chrome 会截取网页一直滚动到底部的整个画面。不过因为截取全网页需要自动滚动(隐藏式的),所以如果网页很长的话需要的时间可能比较久,会看到卡顿。同时,因为有些页面设置的滚动比较复杂(比如一些管理后台页面多区域可滚动),可能会截取失败,只能截取到一小部分。

我们按上下方向键选取第二个指令(Capture full size screenshot)并回车,就可以截取网页全图啦。

截取少数派首页全图
截取少数派首页全图

节点截图

节点截图是我比较喜欢的一个功能,我一般用它来做表情。所谓节点截图,就是截取网页的某一个元素节点。网页都是由 HTML 元素组成的,比如说一个图片是 <img>,一段文字是 <p>,一个标题可能是 <h1>,等等。

我们可以在顶部菜单栏中选取第一个菜单,即 Elements(元素),这时候就能在下面看到整个网页的节点了。这些节点一层又一层,当我们点击左边的三角形时可以展开它们,点击某一行时可以看到网页中对应的元素被一层蓝色覆盖。

当然,这样在复杂的 HTML 代码中找到想要的页面元素太耗费时间了。我们可以点击开发者工具左上角的元素选择箭头,就可以移动鼠标到页面中直接选取需要的节点了。

此时我们已经选中了这个节点,按 Cmd+Shift+P(Windows 下是 Ctrl+Shift+P)打开指令输入框,输入 screenshot 选择 Capture node screenshot,回车就可以把这个节点截取保存下来啦。

我喜欢在截取之前,先改变一下节点中的文字,这样就可以做出一些奇怪的表情包。你可以继续展开节点,找到文字并双击,就可以编辑文字内容了。

编辑完成之后,再选中前面选的外层一点的节点,按上面的方式截取这个节点,就能够下载一个表情包素材了。

表情完成图
表情完成图

窗口截图

所谓窗口截图,就是直接截取浏览器的整个窗口。我们按上下方向键选取第四个指令(Capture screenshot)并回车,就可以截取浏览器窗口中的网页啦。

其他设备尺寸截图

Chrome 开发者工具本身可以模拟各种设备的尺寸,比如说模拟手机上的显示效果,或者是宽屏显示器上的显示效果。借助这个功能,我们可以轻松在电脑上截取其它设备尺寸的图片。

在此之前,我们需要先点击开发者工具的左上角的设备切换按钮,进入到设备模拟模式。可以看到,此时网页会以移动端模式显示,在最上方可以切换设备(截图中选的是 iPhone X)、显示比例等,最右边还有一个更多操作的按钮,我们后面所讲的操作都在这里。

设备模拟模式
设备模拟模式

移动端截图

点击上面所说的更多操作按钮,可以看到菜单中有「Capture screenshot」和「Capture full size screenshot」两个截图操作。第一个就是截取当前窗口,第二个就是截取整个网页长图,这样我们就能在电脑上截取移动端或其他设备的图片了。

截取移动端的图
截取移动端的图

带壳截图

有时候我们想更加个性化一点,截图能带个手机外形,就可以点击更多操作中的「Show device frame」。此时预览窗口周围就会显示你选的手机模型,此时再使用刚才那个「Capture screenshot」操作进行截图,就可以带着手机模型一起截取下来啦。不过遗憾的是,只有少数几个设备才有模型。

带壳截图
带壳截图

自定义屏幕尺寸

也许可选设备列表里面的设备没有你想要的,或者你想自定义一个特殊的尺寸,这时候就可以点击可选设备列表下面的「Edit」菜单,来编辑设备列表。

编辑设备列表
编辑设备列表

此时,在下方的开发者工具中就会出现设备编辑面板。可以看到,有很多设备都没有勾选,也就是说它们不会在顶部设备列表中出现。你可以选择自己喜欢的设备,这样下次就可以在顶部切换了。

编辑设备列表
编辑设备列表

如果你想自定义一个尺寸,可以点击最上面的「Add custom device」,这样就可以自己添加一个特殊的尺寸了。甚至,你还可以设置它是移动设备还是桌面设备,以及设备像素比等属性。

自定义屏幕尺寸
自定义屏幕尺寸

怎么样?有没有想打开你的 Chrome 试试呢?