win10谷歌浏览器quan网页截屏_实用小技巧如何给全部网页截图

相信大家在平时学习和工作的时候,都少不了要对网页截图。可是,如果使用一般传统的截图方法:QQ截图或者微信截图,很难做到对一个网页的全部页面截图。如下图:

90b09afbdf8a8cd8737a6a246e3272f3.png

001

因为这些截图方法,只能对电脑屏幕现在展示出来的内容截图。所以,今天我就来给大家分享一个:给全部网页截图的方法。

方便又快捷。

理论学习

我们使用谷歌浏览器:

fc073b4d2276c3876c77879ba88d5203.png

来做全网页截图的工具。接下来,我们来选取我们截图目标网页:

http://peekpa.com/detail/202006306403/

如果单独截屏的话,只能一张一张的截图:

619f6f8401a1ca3ea99f018ccde0f9be.png

002

如果想要截整张网页,请记住以下步骤:
  1. 打开开发者工具;

  2. Shift + Ctrl + P 或者 Shift + Command + P,进入输入命令页面;

  3. 输入screenshot即可。

接下来,我们通过实战来演示一下怎么实战操作。

实战演练

我们的目标网页地址:

http://peekpa.com/detail/202006306403/

619f6f8401a1ca3ea99f018ccde0f9be.png

002
第一步,我们打开开发者工具。

这里有两种方法可以打开谷歌浏览器的开发者工具:

  1. 通过页面顶端右侧的菜单按钮 -< 更多工具 -< 开发者工具路径打开:

ab94f1cc9e7a14e966acfbec4839d00b.png

003
  1. 按快捷键Shift + Ctrl + I 或者 Option + Command + I打开:

958849a2eca245ecfa2099a6e2c38a60.png

004

下面红框就是传说中的 开发者工具

第二步,打开命令输入栏。

当我们打开了开发者工具,可以直接按Shift + Ctrl + P 或者 Shift + Command + P,进入输入命令页面:

772a2e51dc8cd2b28f2aa0c828730d93.png

005

这个红色的框框就是命令输入框。

第三步,输入命令。

第三步,直接输入screenshot,我们就会看到:

9a8bd9451b084d1d32f74cfc82e1d8b2.png

006

可以发现,这里有四个 screenshot命令:
  • Capture area screenshot:选取范围截图

d5d78a12b36153384f597e862146eecc.gif

最后截图就是选中的那一块:

b51e989326d983629a45c07695e1b73d.png

  • Capture full size screenshot:截图全部页面

7defdf09522d7011a3549ae693cffd0d.gif

  • Capture node screenshot:截取手机版网页长图

  • Capture screenshot:截取网页可视区域

d22e162a55af0c9cc5bb7bf41480c3ff.gif

这样,我们如果要截取全部页面的话,就只需要使用Capture full size screenshot命令就可以了。是不是很方便。

技术总结

最后,我们总结一下如何使用Chrome浏览器截图网页全图:

  1. 打开开发者工具;

  2. Shift + Ctrl + P 或者 Shift + Command + P,进入输入命令页面;

  3. 输入screenshot即可;

  4. 选择Capture full size screenshot命令就是网页全图;

  5. 完毕。

最后安利一个小事,就是『皮爷撸码』官方网站Peekpa.com已经上线了,而且历史文章中还有详细的记录,教你怎么用Python的Django开发Peekpa.com。还不赶紧学起来?

想要知道更多,就去Peekpa.com

fda24ccafe43b4653f714fc6fcc82a6b.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值