开发者模式下获取页面资源

浏览器开发者工具的打开方式有以下几种：

1，Fn + F12；(点击F1到F12按键无效时候 就先点Fn再点F1到F12中的按键)
2，快捷键 Ctrl + Shift + I；
3，鼠标右键检查或者审查元素；
4，浏览器右上角 —> 更多工具 —> 开发者工具

接下来介绍如何在开发者模式下查找并下载页面资源

1，利用上述方式打开开发者模式以后页面状态如下：

开发者模式截图.png

不同的浏览器打开后，开发者模式排版布局会有所不同，此时可以点击下图红框标注的按钮可以根据个人习惯进行修改。

image.png
点击按钮后效果如下：
在红框内选择，分别可以设置，左右，上下，等排版方式 image.png image.png

2，Network（网络面板）：

从发起网页页面请求 Request 后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据自己需要选择不同的资源分类如下图：

image.png

3，过滤资源

img : 图片资源
media：媒体资源（音视频）
这两个按钮相当于是过滤功能，点击img就会过滤出所有图片请求，点击media 就会过滤出所有的音视频请求
点击每次请求地址，如上图在右边会出现此次访问的详细信息
Request URL 是此次资源访问的地址，（img 图片地址，media 音视频地址）

3.1:到此步骤后如果遇到 network>media下没有任何内容 如下图： image.png

此时刷新一下浏览器，或者播放一下需要保存的视频，就会过滤到请求地址

3.2:当过滤出内容过多的时候 image.png

此按钮清除所有过滤出的资源，如果遇到请求地址太多的情况下可以清除后在继续刷新或者播放

4，下载media资源

1，复制Request URL 后面的音视频请求地址

image.png

2，放到浏览器里面进行访问，如下图

image.png

3，视频右下角三个点，点击开就能看到下载按钮了如下：

image.png

点击下载就OK了。