『技巧』如何利用Chrome进行网页长截图-Mr.KevinH

之前在截网页长截图的时候,一直找不到很好的方法,要么是下载软件,但是又不想去下载,要么是一段一段截下来,自己去PS拼,在百度上搜了一下,原来Chrome原生自带长截图的功能,这里做一个分享。

基础工作:Chrome升级至59或更高版本,然后按下F12(Windows) ⌘Command + ⌥Option + I(Mac)快捷键,打开调试界面。

『技巧』如何利用Chrome进行网页长截图-Mr.KevinH

2、按下Ctrl + Shift + P(Windows) ⌘Command + ⇧Shift + P(Mac),输入命令 Capture full size screenshot(只输入 full 就行了),按下回车,Chrome会自动截取整个网页并保存到本地,由于是渲染引擎直接输出,速度更快,分辨率更高。

『技巧』如何利用Chrome进行网页长截图-Mr.KevinH

输出长截图如下

太长了,还是直接点击链接查看吧:点击查看原图

但是有时候发现,截出来的图片是没有东西的,是透明的,比如我的网站直接用上面那个命令,截出来就是空白的,那么就需要用到下面的命令

如果想精准截取网页某一部分,可以按下Ctrl + Shift + C(Windows) ⌘Command + ⇧Shift + C(Mac),打开嗅探元素,选中你想要的部分后,再运行 Capture node screenshot命令,然后你会发现你选择的那块区域已经截取下来

『技巧』如何利用Chrome进行网页长截图-Mr.KevinH

效果如下:

『技巧』如何利用Chrome进行网页长截图-Mr.KevinH

另外,Capture screenshot 命令可以让你截取当前网页的可视部分。

对于想截取移动端的网页,也是有办法的,按下Ctrl + Shift + M(Windows) ⌘Command + ⇧Shift + M(Mac)快捷键,打开模拟移动设备,选择你的设备型号,再重复上面的命令即可。

『技巧』如何利用Chrome进行网页长截图-Mr.KevinH

效果:

『技巧』如何利用Chrome进行网页长截图-Mr.KevinH

需要说明的一点是,Chrome自带的截图,兼容性可能会有问题,特别是在有延迟加载的网页上,截出来的内容,要么是空白的,要么是花屏,在我的这个博客就遇到过上述两个现象,所以如果你是比较常使用长截图功能,还是推荐下载安装专业的软件或者插件。