巧用Chrome实现网页截图

+ -
0
巧用Chrome实现网页截图

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

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

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

在浏览器窗口底部弹出的面板就是开发者工具啦。此时,我们继续按下 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)并回车,就可以截取网页全图啦。



更多详情请访问电子派 - 电脑上网页截图,一个 Chrome 就够了
信息
想要留言? 请 登录 您的账号。还没有? 你可以 免费创建账号

Comments 0