利用 Chrome 原生工具进行网页长截图

1 背景2 环境3 操作3.1 准备工作3.2 截图过程3.2.1 电脑端长图3.2.2 手机端长图3.2.3 按屏幕区域截图

1 背景

日常使用过程中截图被使用的越来越频繁，其中window/linux/mac系统自带了截图工具，包括我们在使用高频的社交工具QQ/微信也都自带了截图工具。但是这些是怎对固定区域的截图，针对比较复杂的长网页进行截图，就显得有点力不从心了，浏览器使用高频的chrome,本次也是针对chrome在网页中的截图。

2 环境

操作系统：elementary 5.1.7

浏览器：chrome 96.0.4664.93（正式版本） （64 位）

3 操作

3.1 准备工作

1、浏览器版本确认

操作之前确保chrome浏览器已经升级至59 或更高版本。

3.2 截图过程

3.2.1 电脑端长图

1、打开界面

在chrome浏览器中打开需要截图的网页页面。

2、打开调试模式

鼠标左键点击chrome浏览器右上角三个点，弹出的菜单中选中“更多工具”，在弹出的子菜单中点击“开发者工具”

快捷键

针对不同型号的电脑，可能有需要使用Fn键配合F12使用调出开发者工具模式。

3、整页面截图

“开发者工具”模式下打开，点击右上交的三个点，在弹出的子菜单中选择“Run command”

快捷键

在打开的命令行窗口中输入“Capture full size screenshot”，输入完毕，点击回车按钮，Chrome 就会自动截取整个网页内容并保存至本地。由于是渲染引擎直接输出，其比普通扩展速度更快，分辨率也更高。

下载目录中找出下载完毕的长图使用。

3.2.2 手机端长图

Chrome浏览器除了截图电脑端的长图也可以截图手机端的网页长图。

1、调整为移动设备

开发者工具模式下点击左侧手机图标

快捷键

展现的页面变成手机页面，如果展现异常，刷新一下页面即可。

在顶部的工具栏中，你可以选择要模拟的设备和分辨率等设置。

再按刚才的方法运行命令就可以了。

调出命令窗口

输入

Run >Capture full size screenshot

3.2.3 按屏幕区域截图

准确截取网页的某一部分

Mac按下 ⌘Command + ⇧Shift + C

Windows/linux 为 Ctrl + Shift + C嗅探元素。

选中想要的部分后，再运行 Capture node screenshot 命令，一张完美的选区截图就诞生了。

区域图