前言:对于一个开发人员来说,Chrome的开发者工具绝对不会陌生,而普通用户如果能利用好下面提到的关于开发者工具的三个技巧,也绝对是大有裨益。
F12是Chrome调用开发者工具面板的快捷键,同样在网页中右键-检查,也可以调出开发者工具面板。

Chrome开发工具是一套Chrome内置的Web开发和调试工具,如果不是从事开发工作,大家平时是完全用不到的。在这里我对Chrome的开发者工具总结了三个实用技巧,大家使用Chrome的过程中应该会用到,有兴趣的话,可以学习一下。
保存网页视频
PS:先声明一点,这个方法不是万能的,有些大型视频网站中的视频是无法保存的(比如爱奇艺、优酷),因为它们将视频进行了分段,需要一些插件或者工具才能下载,这些方法以后我也会提到。
1. 打开视频的播放页面
到土豆视频网站,随便找一个视频。

2. F12-打开开发者工具
打开开发者工具面板后,切换到Network面板(监控网页所有的http请求),并clear所有请求信息:

3. 刷新当前网页
保持开发者面板是打开状态,并刷新视频网页(快捷键F5),可以看到Network面板出现许多请求信息:

4. Size排序
在Network面板,点击“Size”,将所有请求数据从大到小排序,排名第一的就是数据量最大的,也就是一个视频文件:

鼠标可以悬浮在文件上面查看文件名,可以看到文件后缀是mp4,可以知道确实是一个视频文件:

也可以在Network面板中点击"Media",筛选出媒体文件,可以看到只剩下一个刚才数据量最大的那个文件,也就是一个视频媒体文件:

5. 新窗口打开视频文件
在文件上面右键,选择"Open in one tab":


6. 保存视频
在视频上面右键,选择“视频另存为”,即可保存视频到本地。


保存网页图片
就以Bing的首页图片为例吧,毕竟是桌面壁纸级别的高清图片,保存起来还是很有价值的。
保存方式和上面保存视频的方式差不多,原理也是一样的,都是找到其文件地址,然后在新窗口中进行保存,不过这里有两种不同的操作方式。
第一种操作方式
1. F12-打开开发者工具
前面几个步骤和保存视频的一样,先打开开发者工具,然后切换到Network面板,并clear数据,然后刷新页面:


2. Img筛选
点击"Img",筛选出页面所有图片,然后点击每个文件,右侧会有图片浏览,找到要保存的图片即可:

3. 新窗口打开文件并保存
在找到的图片文件上面右键,选择"Opne in new tab":


在新窗口的图片上面右键,选择“图片另存为”:


第二种操作方式
1. 审查元素
在开发者工具中,选择"Elements"面板:

点击"Elements"左侧的鼠标指针(选中会变成蓝色),然后点击网页中的图片(选中会变成蓝色),确保选择的蓝色区域是图片:

2. 找到图片地址
如果上面选对了图片区域,在"Elements"面板中,就会自动跳转到图片所在的代码区域:

看到上面div的id为"bgImgProgLoad"(bg应该就是background的缩写),可以知道确实是设置背景图片的代码:

鼠标点击这片区域的代码块,找到图片地址:

3. 保存图片
在图片地址上面右键,选择"Open in new tab",然后在新窗口保存图片即可。



解除网页限制
有些网站内容是被限制的,无法被选中,甚至无法点击鼠标右键。因此我们想复制网页文字或者保存网页图片就受到了限制,利用开发者工具,我们就能解除这些限制,任意复制网页内容。
以360doc图书馆为例(这个网站需要登录才能复制)。
1. 打开开发者工具
打开开发者工具,切换到"Elements"面板,点击鼠标指针,选中要复制的文字(选中的会变蓝色):

2. 复制文字
在"Elements"面板,找到选中的文字,双击左键,然后选中文字,右键复制:

欢迎关注微信公众号【wanzhuan556】,分享好玩的,你不知道的。
网友评论