Chrome 无需插件截图

发表于

版本要求：Chrome 59 及以上版本

Step1. 打开开发者工具

可以在菜单中的「更多工具 - 开发者工具」中打开也可以通过快捷键 F12 （Windows）或 Command + Option + I（Mac）

Step2. 打开命令窗口

按下 Ctrl + Shift + P（Windows）或 Command + Shift + P（Mac），出现如图所示的「条状输入框」即可

Step3. 输入截图命令

Chrome 原生支持三种截图方式

  • 滚动截图
  • 可见区域截图
  • 块区域截图

M1. 滚动截图（截取整个页面）

在弹出的输入条中输入 Capture full size screenshot 即可（只需输入前几个字母然后选择即可，无需全部输入），

按下回车后 Chrome 会自动截图并「下载」此图片

图片即为整个网页「滚动截屏」的结果

M2. 可见区域截图

如果只想截取当前可以看到的内容，输入 Capture screenshot 即可

截取到的部分仅仅是可视区域

M3. 块区域截图

如果意图是只截取「正文部分」或者其他区块性的部分，则可以使用此方法

单击开发者工具的左上角图标或按下快捷键 Ctrl + Shift + C（Windows）或 Command + Shift + C（Mac），然后用鼠标点选网页中需要截图的区域

在之前提到的命令输入条中输入 Capture node screenshot 即可

截取到的部分仅仅是刚才选择的区域

扩展功能 - 模拟手机截图

在开发者工具打开的情况下，按下 Ctrl + Shift + M 或 Command + Shift + M（Mac）模拟「移动设备」，并可选择设备或自定义设备

选择后，再次使用「Step3」的方法截图即可

扩展功能再扩展 - 手机带壳截图

在上面模拟手机截图的情况下，点击网页区域右上角的菜单，选择「Show device frame」即可在网页中看到「有手机壳的效果」


这时可以采用上面「M2」的方法截取可见区域，而「M1」和「M3」的方法无效

参考自 少数派，有删改