chrome截图工具

在浏览网页时,经常会遇到网页比较长(滚动条),我们需要截图整个网页的情况。之前的做法一直使用FSCapture工具,它可以截取带有滚动条的网页,但是很不方便。今天,我们来看下如何使用chrome来更高效的完成。

注:要想使用截图功能,你需要首先确保 Chrome 已升级至 59 或更高版本。

1、截图的步骤:

1)打开开发模式:

在想要截图的网页中,首先按下 Command + Option + I(Windows 为 F12)快捷键(或者右键-> 检查),召唤出调试界面。

2)在调试页面,按下 Command + Shift + P(Windows 为 Ctrl + Shift + P):

在命令窗口中,输入Capture ,会自动关联出如下命令:

chrome截图工具_第1张图片

根据不同需求,可以选择滚动屏幕截图、截取当前显示器窗口,选择区域截图...

之后,chrome会自动将图片下载到本地,由于是渲染引擎直接输出,其比普通扩展速度更快,分辨率也更高。 

2、截取指定区域的例子:

F12打开开发模式,然后选择网页的区域,选好后,输入: Ctrl + Shift + P,在命令行输入Capture,然后点击Capture node screenshot,即可把对应的div内容保存下来。

chrome截图工具_第2张图片

3、模拟移动设备截图:

chrome截图工具_第3张图片

打开F12调试界面,选择左上角移动设备,然后输入:Ctrl + Shift + P,在命令行输入Capture,根据不同要求选择截图的方式。

 

你可能感兴趣的:(工具)