利用 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 命令，一张完美的选区截图就诞生了。
区域图
———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击网站首页每天更新
站 长 微 信： aiwo51889
