本文讲述chrome浏览器自带的一个非常非常隐蔽的截图功能。对,这个功能非常非常隐蔽。功能是针对浏览器里面的网页进行操作的,所以,截图并不能处理浏览器外部的内容,或者严格的说,只是网页范围内的区域,连浏览器的菜单栏之类的区域,都是不能被截取的。

苏南大叔:如何使用chrome浏览器自带的截图功能? - chrome-screenshoot
如何使用chrome浏览器自带的截图功能?(图3-1)

本文测试环境:macchrome@80.0.3987.149(正式版本)(64 位)

隐藏的截图功能

首先,要打开chrome的开发者模式,这个就不多少了。mac下面的快捷键是:alt+win+i
其次,聚焦到底部的开发者区域,再打开一个神秘的快捷命令输入模式。快捷键是:shift+win+p.
再次,在输入框里面,输入命令screen。就可以筛选出相关的截图命令了。

苏南大叔:如何使用chrome浏览器自带的截图功能? - screen-toolbar
如何使用chrome浏览器自带的截图功能?(图3-2)

命令详解

值得注意的是:可操作区域就是网页body的区域哦,出了这个区域就无法操作了。
一共四个命令。特殊的就两个:网页全屏截图和节点dom截图。

  • capture area screenshoot,常规的自定义截图。只不过可截图的范围被限定在网页的body区域。
  • capture full size screenshoot,网页全屏截图,这个最常使用了。做个网页效果,用这个网页全屏截图,就不用滚动拼接了,非常棒。便于直接发效果图给客户。
  • capture node screenshoot,节点截图,这个功能很厉害,可以根据左侧选择的dom,来精确的截图。这个功能有点新颖。
  • capture screenshoot可视区域截图,就是最普通的截图,不处理滚动轴区域。

苏南大叔:如何使用chrome浏览器自带的截图功能? - screenshoot-node
如何使用chrome浏览器自带的截图功能?(图3-3)

相关链接

关于截图这块的内容,苏南大叔说过很多方案,当然了,每个方案都有多多少少的缺陷。所以,大家辩证的看待这个问题吧。

总结

chrome的这个自带的截图功能,那是非常的隐蔽。不过在特殊情景下,使用起来,还是比较方便的。更多chrome使用小技巧,请参见苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   chrome    截图

本站的忠实读者小伙伴,正在阅读下面这些文章: