头图

无需软件,教你用 Chrome 原生工具给网页长截图

ineo6

通常我们会使用系统的截图工具或者浏览器扩展给网页截图,然而实际上ChromeSafari都已经内置了网页截图功能,而且支持长图效果。

虽然这个方法也不是完美的,但也是一个触手可得的方案,让你不借助额外工具截图。

打开检查工具

按下F12会弹出开发者工具。

image.png

选择命令

然后按下快捷键⌘Command + ⇧Shift + P(Windows为Ctrl + Shift + P),在输入框输入screenshot即可看到以下几个选项:

  • Capture area screenshot - 截取选择部分区域截图
  • Capture full size screenshot - 网页长截图
  • Capture node screenshot - 截取指定节点截图
  • Capture screenshot - 截取可视区域截图

截图默认会放到浏览器下载目录中。

image.png

当在检查工具里点击右键时其实也能看到截图功能,不过目前只有Capture node screenshot,希望以后能支持更多截图功能。

image.png

手机端截图

此外,你还能截取手机效果的长图,首先按下快捷键⌘Command + ⇧Shift + M(Windows为Ctrl + Shift + M)进入手机端浏览模式。

也可以点击下面按钮切换模式:

image.png

然后按照前文的截图命令,即可生成你想要的手机长图。

提示:浏览器也在附近菜单添加了选项,见下图红框位置。

image.png

另外这里支持常见的多种设备访问效果,也可以自定义其他设备尺寸。

赠送小技巧:关于 macOS 截图快捷键

全屏截图

⇧Shift + ⌘Command + 3

image.png

选定区域截图

⇧Shift + ⌘Command + 4

image.png

拖移十字线
image.png
以选择要捕捉的屏幕区域。要移动所选区域,请在拖移时按住空格键。要取消拍摄截屏,请按下 Esc 键。

捕捉窗口或菜单

⇧Shift + ⌘Command + 4 + 空格

image.png

  1. 先按⌘Command + ⇧Shift + 4,然后放开
  2. 接着再按空格键
  3. 要去除窗口阴影效果,请在点按时按 ⌥Option 不放
  4. 点击想要截图的窗口

macOS Mojave 或更高版本中,还可以通过“截屏”App 来设定计时器以及选取截屏的存储位置。要打开这个 App,请同时按住以下三个按键:Shift、Command 和 5。

关于“截屏”App和Windows上截图快捷键的介绍,敬请期待下篇文章。

文章首发:

无需软件,教你用 Chrome 原生工具给网页长截图

阅读 408

湖中剑
Code is Art
320 声望
4 粉丝
0 条评论
你知道吗?

320 声望
4 粉丝
宣传栏