奔跑中的奶酪

奔跑中的奶酪 有智,有趣,有爱
当前位置 - 首页 - 软件 - 浏览器F12的妙用[不定期更新]

浏览器F12的妙用[不定期更新]

emlvirus  发表于:2017-03-08  48766次浏览  8条评论 

场景

不知道大家有没有这样的感受:平时在使用浏览器上网的过程中总会遇到这样那样的小需求,比方说下载一个单段的网页视频、对一个特定区域的截屏、了解自己的网络是否有连接错误等等。
很多人为了这些琐碎的需求到处找工具且大为苦恼,今天就给大家分享一键式解决办法——浏览器 F12(≧∇≦)ノ

使用环境

首先给大家科普一下:F12 在浏览器当中的作用是调出一个名为开发者工具 Developer Tools 的浏览器内置工具集。
但是大家不要被名字误导了,F12并非开发者专用,也并非只有开发者才能驾驭,它对于一般用户也有着不少妙用。大家也不必被纯英文的工具UI吓到,多多尝试就会有新发现。
此外大家需要注意,一些奇葩的国产套壳浏览器例如360、QQ、搜狗是没有F12的~~~是不是又多了一个使用国际主流浏览器的理由呢( ̄▽ ̄#) = ﹏﹏

具体实例

下面就详细地为大家介绍浏览器F12的妙用(以Firefox为例,其他浏览器操作大同小异)( ̄︶ ̄)↗[GO!]

元素位点截图(Firefox v42+专属功能是不是又多了一个使用Firefox的理由呢

听起来似乎无比高逼格的名字,其实很简单:就是对页面中任意一个按钮或者元素区域匹配边缘的截图。具体如下:
找到你需要截图的地方,单击右键,点击审查元素(有些浏览器中文译为检查元素
位点截图
随后浏览器就会启动开发者工具 Developer Tools,并选中高亮元素对应代码段,此时右键单击高亮的代码段,点击Screenshot Node即可保存截图o(*≧▽≦)ツ

快速下载保存单段页面视频

视频下载狂的福音,此处以B站为例,其它站点类似:
在你喜欢的视频播放器按下F12启动开发者工具 Developer Tools,点击Network(网络)选项卡,此时会显示当前网页的所有网络通信内容的详情(若此时内容为空白按下F5刷新即可),接着点击All(所有,即显示所有通信内容)旁边的一排筛选按钮中的Media(媒体,即显示视频音频图像等)与Flash(即显示来自Flash的内容)进行筛选
单段视频
此时我们就(在本例中)看到了三个内容,相信凭大家的智商应该已经知道其中的36M的一条就是目标。
点击这个条目,接着在右侧就会看到Request URL处写着一条链接。
视频URL
这个链接就是目标视频的链接。三击鼠标左键全选这条连接即可右键复制Copy出来,接下来的故事你懂得~~~(*/ω\*)
不过值得注意的是,这个方法如果遇到多段视频还是比较繁琐的(页面通信相对复杂),此时还是寻求专业工具为好。

获取图片或是缩略图的完整大图

接下来是绅士福利时间o(*////▽////*)q
在一些网站当中大家会经常看到一些福利本子图图片的缩略图,通过F12也可以获取完整大图:
在找到的缩略图上右键点击审查元素,此时会显示对应图片的来源URL。要是不小心点歪了也大丈夫,找到附近以.jpg结尾的一个链接就OK,当你鼠标移动到上面显示目标缩略图就对啦
缩略图
此时右键点击Copy Links Address(复制链接地址)就可以复制出来。但是.....很顽皮啊~~~小图啊o(≧口≦)o
此时需要对链接进行小小的处理:粘贴到浏览器地址栏之后,可以看到链接结尾处即是缩略图的尺寸(注意比对红框信息即可知):
缩略图URL处理
此时,看到这个缩略图参数,将其删除,对,没有看错,删除,注意处理前后符号跟扩展名。得到完整大图URL如下:i2.hdslb.com/bfs/archive/a96729ac9e0a14544d1fcdb1471d23cf7ac1e61b.jpg
接下来的事情你也懂的o(*////▽////*)q
目标大图
值得注意的是,这个办法仅仅适用于这一类的限制宽高的链接喔。大批量扒图请参考扩展Pick & Save Image或者DownloadThemAll!又是Firefox专属福利,差评!

总结

各位是不是感觉找到了新大陆呢n(*≧▽≦*)n 其实很多事情就是这样,多多尝试就会有新发现。
二维码

扫描本页面二维码
用手机浏览本站

QR:浏览器F12的妙用[不定期更新]

Top