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

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

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

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

输出长截图如下

太长了，还是直接点击链接查看吧：点击查看原图

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

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

效果如下：

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

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

效果：

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