分享

利用开发者工具,截取网页高清长图

 取反加一 2018-08-12


相信很多同学都有截图的需求,有时候一个网页的内容很多,根本没法把所有内容都截取在同一张图片上,有同学可能会把每页截图再重新拼接起来。


其实,我们可以使用工具和浏览器开发者工具来实现网页长图的截取。


以前我分享过一些工具,来实现抓取整个网页的信息内容。


但是这些工具截取出来的图片质量没有很高,在清晰度方面始终有些不足。

并且有些截图工具使用起来会比较麻烦。


所以,今天教大家怎么使用Chrome浏览器的开发者工具命令来截取网页的长图。


比如我现在想截取quora网站上的这个首页长图,从动图可以看到,这个首页的信息还是比较多的。


现在我们使用快捷键F12调出开发者工具,你也可以右击鼠标,然后找到检查元素,进入开发者工具

然后使用快捷组合键Ctrl+shift+P,打开一个可以输入命令查找文件的窗口


然后输入:Capture full size screenshot,意思是抓取全网页面的截图

然后Chrome浏览器就会自动抓取网页的截图,然后把这个网页截图保存到本地了

如果你只想截图当页面的内容,那么你可以直接输入:Capture screenshot,就可以截取屏幕当页的内容信息

如果你想再电脑端模拟手机版的截图,那么你可以在开发者工具的左上角,点击那个图标切换设备,你也可以使用快捷键Ctrl + Shift + M

当你点击之后,页面显示就会从网页版就会切换为手机版

如下动图

并且我们可以设置为不同手机的大小,模仿不同手机来截取长图,然后截取手机版的长图跟上面的方法一样


输入Capture full size screenshot,就可以了

云景分享:如何快速学一门编程技能

很多同学可能不知道,我写了一个真正零基础的Python入门教程,这个基础教程专门是写给非计算机专业的同学的,只要你有高中水平基础,就可以看得懂。

Python是一门简单又强大的计算机语言,对于普通人来说,可以用代码收集分析网上的数据,用代码批量整理资源,开发一些实用的小工具,比如抢票等

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多