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 网页长截图相关推荐

python实现网页长截图
python实现网页长截图实现思路使用工具和第三方库参考内容网址具体代码案例实现思路获取到所需内容截图.移动.截图.移动- 拼接使用工具和第三方库 Python.Pycharm PIL ...
电脑qq浏览器怎么滚动截长图_Mac系统如何轻松实现网页长截图功能
Mac 网页长截图在日常工作生活中,我们经常需要使用到截图功能,简单的一页截图使用常用的截图工具即可,但是有时会碰到需要截图多页内容或者整个网页,使用截图工具分页截图再拼接不仅复杂而且耗时. 那么针 ...
浏览器无需下载插件解决网页长截图的小技巧
作为前端开发人员,可能会经常需要截取一些网页的整张图片,大家平时可能使用计算机自带截图或者QQ.微信等截图快捷键来截取某部位图,实现不了全站长截图. 当然,360浏览器可使用快捷键 Ctrl+M 来截 ...
Chrome浏览器网页长截图方法
平时我们在浏览网页的时候,碰到自己喜欢的页面,想要截图而自己的显示器窗口高度有限,我下面将为大家分享这种方式,获得整个网页的截图.一起来开始吧: 首先,我们用到的浏览器是谷歌的Chrome浏览器. 第 ...
某个网页一直不停刷新_利用浏览器做网页长截图
在平时写文章的时候,我经常需要插入一些截图,不知你有没有注意到,在能使用手机截图的情况下,我都尽量不在 PC 上进行截取操作. 其实有如下几个理由: 基于微信平台下,大多数用户使用手机进行阅读,在电脑 ...
java selenium div内嵌滚动条网页长截图发邮件
java selenium 网页内嵌滚动条截图发邮件主要问题下面展开说由于公司要求做一个接口,请求这个接口进行网页截图并发送邮件的功能,本来前期是用python写好了,but似乎不太符合要求,那 ...
使用Chrome浏览器实现网页长截图无需安装插件
有些网页比较长,一屏装不下,需要拉动滚动条才行,这种网页我们想截图截取全部内容时就比较困难如果使用的是Chrome浏览器,可以使用如下方法截图: 打开网页后按快捷键 F12 打开移动设备预览模式( ...
Chrome 浏览器原生工具进行网页长截图
在想要截图的网页中,首先按下 Ctrl + Shift + I(或直接 F12 )快捷键,召唤出调试界面. 随后,按下 (Ctrl + Shift + P) ,输入命令 Capture full s ...
Chrome原生工具实现长截图
Chrome原生工具实现长截图文章目录 Chrome原生工具实现长截图前言操作步骤参考文章前言我们在网上冲浪时,经常遇到一些搞笑的或者是写的比较好的文章,想长截图给别人分享.可是 Wind ...
Python将网页转化为PDF(python网页自动长截图)
初次实践:python网页自动截图步骤如下: (1) 安装python selenium 库,推荐使用pip快速安装最新版本 pip install selenium (2) 检查Chrome浏览器 ...

Chrome 网页长截图

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