一步两步,解锁 Chrome 长截图功能

Chrome 浏览器作为开发人员的最爱,有很多小巧实用的特殊功能。譬如,输入短链接 chrome://inspect 就能帮助 Android 开发人员可视化调试查看应用中用到 SQLite 数据库信息,非常方便。

诸如此类小技巧,还有很多。这篇文章教大家如何利用 Chrome 浏览器自带的功能截取 PC 端的网页滚动长屏。

第一步,使用 Chrome 浏览器打开需要截取的页面,右键点击「检查」或者利用 Mac 快捷键 ⌘Command + ⌥Option + I 打开网页调试页面;

第二步,按下 Mac 快捷键 ⌘Command + ⇧Shift + P 打开命令行窗口,输入 Capture 关键字;

一步两步,解锁 Chrome 长截图功能

如图,Capture 开头的相关指令就是 Chrome 浏览器自带的所有网页截图功能,其中 Capture full size screenshot 就是我们要找的网页长截图功能,选中点击即可自动截取整个网页页面,并自动保存至本地。

非常方便。同时我们也可以看到,Chrome 还支持区域截图,屏幕截图等。这里再特殊介绍一下 Html 结果指定元素节点截图:

Capture node screenshot

使用这个工具,需要提前使用调试工具左上角的 Select 箭头工具或者直接切换 Elements 窗口选定一个 Html 标签元素,然后再执行 Capture node 命令,才能奏效。

至于 Chrome 提供的其他截图功能就没有必要使用了,毕竟系统自带的快捷键截图已经很方便了:

Command + Shift + 3:全屏截图Command + Shirt + 4:区域截图

完~

一步两步,解锁 Chrome 长截图功能

长按识别二维码,关注我,一名爱叨叨的程序员