前言:对于一个开发人员来说,Chrome的开发者工具绝对不会陌生,而普通用户如果能利用好下面提到的关于开发者工具的三个技巧,也绝对是大有裨益。
F12是Chrome调用开发者工具面板的快捷键,同样在网页中右键-检查,也可以调出开发者工具面板。
![](https://img.haomeiwen.com/i22090635/773e56dc5b3654dd.png)
Chrome开发工具是一套Chrome内置的Web开发和调试工具,如果不是从事开发工作,大家平时是完全用不到的。在这里我对Chrome的开发者工具总结了三个实用技巧,大家使用Chrome的过程中应该会用到,有兴趣的话,可以学习一下。
保存网页视频
PS:先声明一点,这个方法不是万能的,有些大型视频网站中的视频是无法保存的(比如爱奇艺、优酷),因为它们将视频进行了分段,需要一些插件或者工具才能下载,这些方法以后我也会提到。
1. 打开视频的播放页面
到土豆视频网站,随便找一个视频。
![](https://img.haomeiwen.com/i22090635/4ef6082946878cae.png)
2. F12-打开开发者工具
打开开发者工具面板后,切换到Network面板(监控网页所有的http请求),并clear所有请求信息:
![](https://img.haomeiwen.com/i22090635/26c50b4e4cbb9652.png)
3. 刷新当前网页
保持开发者面板是打开状态,并刷新视频网页(快捷键F5),可以看到Network面板出现许多请求信息:
![](https://img.haomeiwen.com/i22090635/92a18143682a553b.png)
4. Size排序
在Network面板,点击“Size”,将所有请求数据从大到小排序,排名第一的就是数据量最大的,也就是一个视频文件:
![](https://img.haomeiwen.com/i22090635/62174970968e9d4b.png)
鼠标可以悬浮在文件上面查看文件名,可以看到文件后缀是mp4,可以知道确实是一个视频文件:
![](https://img.haomeiwen.com/i22090635/f8215719fee58e09.png)
也可以在Network面板中点击"Media",筛选出媒体文件,可以看到只剩下一个刚才数据量最大的那个文件,也就是一个视频媒体文件:
![](https://img.haomeiwen.com/i22090635/298ecf4c86d5f8e2.png)
5. 新窗口打开视频文件
在文件上面右键,选择"Open in one tab":
![](https://img.haomeiwen.com/i22090635/48ca47e26ca24fa3.png)
![](https://img.haomeiwen.com/i22090635/620a9804e9deb2d0.png)
6. 保存视频
在视频上面右键,选择“视频另存为”,即可保存视频到本地。
![](https://img.haomeiwen.com/i22090635/451a0ea25e2093f5.png)
![](https://img.haomeiwen.com/i22090635/a79ef29ab5ef8da7.png)
保存网页图片
就以Bing的首页图片为例吧,毕竟是桌面壁纸级别的高清图片,保存起来还是很有价值的。
保存方式和上面保存视频的方式差不多,原理也是一样的,都是找到其文件地址,然后在新窗口中进行保存,不过这里有两种不同的操作方式。
第一种操作方式
1. F12-打开开发者工具
前面几个步骤和保存视频的一样,先打开开发者工具,然后切换到Network面板,并clear数据,然后刷新页面:
![](https://img.haomeiwen.com/i22090635/64b2080e33032f87.png)
![](https://img.haomeiwen.com/i22090635/d38d42ee2850422e.png)
2. Img筛选
点击"Img",筛选出页面所有图片,然后点击每个文件,右侧会有图片浏览,找到要保存的图片即可:
![](https://img.haomeiwen.com/i22090635/194325175e23a27d.png)
3. 新窗口打开文件并保存
在找到的图片文件上面右键,选择"Opne in new tab":
![](https://img.haomeiwen.com/i22090635/7acedead10996375.png)
![](https://img.haomeiwen.com/i22090635/3ebfff798d5f0853.png)
在新窗口的图片上面右键,选择“图片另存为”:
![](https://img.haomeiwen.com/i22090635/27139e5522ced06d.png)
![](https://img.haomeiwen.com/i22090635/81a1cc53d7cb4d44.png)
第二种操作方式
1. 审查元素
在开发者工具中,选择"Elements"面板:
![](https://img.haomeiwen.com/i22090635/e584fa3066a5b1b9.png)
点击"Elements"左侧的鼠标指针(选中会变成蓝色),然后点击网页中的图片(选中会变成蓝色),确保选择的蓝色区域是图片:
![](https://img.haomeiwen.com/i22090635/37a32531d1d70c72.png)
2. 找到图片地址
如果上面选对了图片区域,在"Elements"面板中,就会自动跳转到图片所在的代码区域:
![](https://img.haomeiwen.com/i22090635/9ef08c7aabfdf380.png)
看到上面div的id为"bgImgProgLoad"(bg应该就是background的缩写),可以知道确实是设置背景图片的代码:
![](https://img.haomeiwen.com/i22090635/4dd914c3d08d4ef0.png)
鼠标点击这片区域的代码块,找到图片地址:
![](https://img.haomeiwen.com/i22090635/86c4a2e4bf4c51db.png)
3. 保存图片
在图片地址上面右键,选择"Open in new tab",然后在新窗口保存图片即可。
![](https://img.haomeiwen.com/i22090635/8360338aa692ba48.png)
![](https://img.haomeiwen.com/i22090635/b0622db5b61a8c03.png)
![](https://img.haomeiwen.com/i22090635/1de39402d32ec92c.png)
解除网页限制
有些网站内容是被限制的,无法被选中,甚至无法点击鼠标右键。因此我们想复制网页文字或者保存网页图片就受到了限制,利用开发者工具,我们就能解除这些限制,任意复制网页内容。
以360doc图书馆为例(这个网站需要登录才能复制)。
1. 打开开发者工具
打开开发者工具,切换到"Elements"面板,点击鼠标指针,选中要复制的文字(选中的会变蓝色):
![](https://img.haomeiwen.com/i22090635/f7ee4b341253e58a.png)
2. 复制文字
在"Elements"面板,找到选中的文字,双击左键,然后选中文字,右键复制:
![](https://img.haomeiwen.com/i22090635/5ead6ff2be45e753.png)
欢迎关注微信公众号【wanzhuan556】,分享好玩的,你不知道的。
网友评论