前言：对于一个开发人员来说，Chrome的开发者工具绝对不会陌生，而普通用户如果能利用好下面提到的关于开发者工具的三个技巧，也绝对是大有裨益。

F12是Chrome调用开发者工具面板的快捷键，同样在网页中右键-检查，也可以调出开发者工具面板。

开发者工具

Chrome开发工具是一套Chrome内置的Web开发和调试工具，如果不是从事开发工作，大家平时是完全用不到的。在这里我对Chrome的开发者工具总结了三个实用技巧，大家使用Chrome的过程中应该会用到，有兴趣的话，可以学习一下。

保存网页视频

PS：先声明一点，这个方法不是万能的，有些大型视频网站中的视频是无法保存的（比如爱奇艺、优酷），因为它们将视频进行了分段，需要一些插件或者工具才能下载，这些方法以后我也会提到。

1. 打开视频的播放页面

到土豆视频网站，随便找一个视频。

土豆视频

2. F12-打开开发者工具

打开开发者工具面板后，切换到Network面板（监控网页所有的http请求），并clear所有请求信息：

Network面板

3. 刷新当前网页

保持开发者面板是打开状态，并刷新视频网页（快捷键F5），可以看到Network面板出现许多请求信息：

刷新网页

4. Size排序

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

Size排序

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

查看文件名

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

Media筛选

5. 新窗口打开视频文件

在文件上面右键，选择"Open in one tab"：

新窗口打开 新窗口

6. 保存视频

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

视频另存为1 视频另存为2

保存网页图片

就以Bing的首页图片为例吧，毕竟是桌面壁纸级别的高清图片，保存起来还是很有价值的。

保存方式和上面保存视频的方式差不多，原理也是一样的，都是找到其文件地址，然后在新窗口中进行保存，不过这里有两种不同的操作方式。

第一种操作方式

1. F12-打开开发者工具

前面几个步骤和保存视频的一样，先打开开发者工具，然后切换到Network面板，并clear数据，然后刷新页面：

打开面板 刷新页面

2. Img筛选

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

找到图片

3. 新窗口打开文件并保存

在找到的图片文件上面右键，选择"Opne in new tab"：

新窗口打开 新窗口

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

图片另存为1 图片另存为2

第二种操作方式

1. 审查元素

在开发者工具中，选择"Elements"面板：

审查元素

点击"Elements"左侧的鼠标指针（选中会变成蓝色），然后点击网页中的图片（选中会变成蓝色），确保选择的蓝色区域是图片：

选择元素

2. 找到图片地址

如果上面选对了图片区域，在"Elements"面板中，就会自动跳转到图片所在的代码区域：

图片代码

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

图片代码

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

图片地址

3. 保存图片

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

新窗口打开 新窗口 保存图片

解除网页限制

有些网站内容是被限制的，无法被选中，甚至无法点击鼠标右键。因此我们想复制网页文字或者保存网页图片就受到了限制，利用开发者工具，我们就能解除这些限制，任意复制网页内容。

以360doc图书馆为例（这个网站需要登录才能复制）。

1. 打开开发者工具

打开开发者工具，切换到"Elements"面板，点击鼠标指针，选中要复制的文字（选中的会变蓝色）：

选中文字

2. 复制文字

在"Elements"面板，找到选中的文字，双击左键，然后选中文字，右键复制：

复制文字

---

欢迎关注微信公众号【wanzhuan556】，分享好玩的，你不知道的。