前言：对于一个开发人员来说，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】，分享好玩的，你不知道的。
