0%

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 + MCommand + Shift + M(Mac)模拟「移动设备」,并可选择设备或自定义设备

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

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

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


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


参考自 少数派,有删改

欢迎关注我的其它发布渠道