标签：截图 网页 Chrome Shift 快捷键 chrome 3.2 浏览器
利用 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 命令，一张完美的选区截图就诞生了。
区域图
标签：截图,网页,Chrome,Shift,快捷键,chrome,3.2,浏览器 来源： https://blog.csdn.net/shallow72/article/details/121812305
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。