Chrome 网页长截图

利用 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浏览器中打开需要截图的网页页面。
Chrome 网页长截图_第1张图片
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

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

下载目录中找出下载完毕的长图使用。
Chrome 网页长截图_第4张图片

3.2.2 手机端长图

Chrome浏览器除了截图电脑端的长图也可以截图手机端的网页长图。
1、调整为移动设备
开发者工具模式下点击左侧手机图标
Chrome 网页长截图_第5张图片

快捷键

系统 快捷键
Mac ⌘Command + ⇧Shift + M
linux Ctrl + Shift + M
window Ctrl + Shift + M

展现的页面变成手机页面,如果展现异常,刷新一下页面即可。
Chrome 网页长截图_第6张图片

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

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

系统 快捷键
Mac ⌘Command + ⌥Option + P
linux Ctrl + Shift + P
window Ctrl + Shift + P

输入

Run >Capture full size screenshot

Chrome 网页长截图_第7张图片

3.2.3 按屏幕区域截图

准确截取网页的某一部分
Mac按下 ⌘Command + ⇧Shift + C
Windows/linux 为 Ctrl + Shift + C嗅探元素。
选中想要的部分后,再运行 Capture node screenshot 命令,一张完美的选区截图就诞生了。
区域图
Chrome 网页长截图_第8张图片

你可能感兴趣的:(技术应用,chrome,macos,前端)