在工作中,我们难免需要给一些网页截图。也许你尝试过各种插件,或者是使用过一些截图工具,但其实,Chrome 本身就带有截图特性,功能还很丰富。它不仅可以截取浏览器窗口,还可以截取网页全图,截取移动端显示效果,甚至带壳截图。
那么 Chrome 的截图该怎么用呢?让我给你详细地介绍一下吧。
截图指令
Chrome 的截图功能藏在开发者工具中,所以在截图之前你需要先打开开发者工具。我们可以直接在页面上按下鼠标右键,选择「检查」(或「审查元素」),也可以按下Cmd+Option+I(Windows 下是Ctrl+Shift+I),来打开开发者工具。
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)并回车,就可以截取网页全图啦。
截取少数派首页全图
节点截图