利用 Chrome 原生工具进行网页长截图
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浏览器右上角三个点，弹出的菜单中选中“更多工具”，在弹出的子菜单中点击“开发者工具”
快捷键
| 系统 | 快捷键 |
|---|---|
| Mac | ⌘Command + ⌥Option + I |
| linux | F12 |
| window | F12 |
针对不同型号的电脑，可能有需要使用Fn键配合F12使用调出开发者工具模式。
3、整页面截图
“开发者工具”模式下打开，点击右上交的三个点，在弹出的子菜单中选择“Run command”
快捷键
| 系统 | 快捷键 |
|---|---|
| Mac | ⌘Command + ⌥Option + P |
| linux | Ctrl + Shift + P |
| window | Ctrl + Shift + P |
在打开的命令行窗口中输入“Capture full size screenshot”，输入完毕，点击回车按钮，Chrome 就会自动截取整个网页内容并保存至本地。由于是渲染引擎直接输出，其比普通扩展速度更快，分辨率也更高。
下载目录中找出下载完毕的长图使用。
3.2.2 手机端长图
Chrome浏览器除了截图电脑端的长图也可以截图手机端的网页长图。
1、调整为移动设备
开发者工具模式下点击左侧手机图标
快捷键
| 系统 | 快捷键 |
|---|---|
| Mac | ⌘Command + ⇧Shift + M |
| linux | Ctrl + Shift + M |
| window | Ctrl + Shift + M |
展现的页面变成手机页面，如果展现异常，刷新一下页面即可。
在顶部的工具栏中，你可以选择要模拟的设备和分辨率等设置。
再按刚才的方法运行命令就可以了。
调出命令窗口
| 系统 | 快捷键 |
|---|---|
| Mac | ⌘Command + ⌥Option + P |
| linux | Ctrl + Shift + P |
| window | Ctrl + Shift + P |
输入
Run >Capture full size screenshot
3.2.3 按屏幕区域截图
准确截取网页的某一部分
Mac按下 ⌘Command + ⇧Shift + C
Windows/linux 为 Ctrl + Shift + C嗅探元素。
选中想要的部分后，再运行 Capture node screenshot 命令，一张完美的选区截图就诞生了。
区域图