谷歌浏览器Network详解

怼烎@ 2023-10-02 19:36 2阅读 0赞

Network用F12打开后，出现以下页面。5个部分分别讲解。

1.  控制器
2.  过滤器
3.  时间轴
4.  资源内容
5.  资源概况

![img][]

### 1.控制器 ###

![img][img 1]

**Preserve log**:页面刷新也不会清空请求

**Disable cache**:停用浏览器缓存

**Online**:有网

**Fast 3G、Slow 3G**:自定义网速

**Offline**:离线模拟

### 2.过滤器 ###

2.1按字符串过滤

输入例如“png”,支持后缀过滤

输入例如“/.\*.\[cj\]s+$/”，支持正则表达式过滤

输入例如“-main.css”，支持反向匹配过滤

2.2按类型过滤

选择类型

**All**:该页面所有资源文件

**XHR**:异步请求资源

按住Command（Mac）或Ctrl（Windows、Linux）可支持多个类型

**hide Data URLs**：CSS图片等小文件以 BASE64 格式嵌入HTML中，以减少HTTP请求数。

2.3按属性过滤

![img][img 2]

*  **domain**:仅显示来自指定域的资源。您可以使用通配符字符（\*）纳入多个域
 *  **has-response-header**：显示包含指定HTTP响应标头的资源
 *  **is**：使用 is:running 可以查找 WebSocket 资源，is:from-cache 可查找缓存读出的资源
 *  **Larget-than**：显示大于指定大小的资源（以字节为单位）。将值设为1000等同于设置为1k
 *  **method**：显示通过指定 HTTP 方法类型检索的资源
 *  **mime-type**：显示指定 MIME 类型的资源
 *  **mixed-content**：显示所有混合内容资源（mixed-content:all）,或者仅显示当前显示的资源（mixed-content:displayed）
 *  **scheme**：显示通过未保护HTTP（scheme:http）或受保护 HTTPS（scheme:https）检索的资源。
 *  **set-cookie-domain**：显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。
 *  **set-cookie-name**：显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。
 *  **set-cookie-value**：显示具有 Set-Cookie 标头并且值与指定值匹配的资源。
 *  **status-code**：仅显示 HTTP 状态代码与指定代码匹配的资源。

多属性间通过空格实现 AND 操作。

### 3.时间轴 ###

> **DOMContentLoaded**事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。  
> **load**事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

`DOMContentLoaded`事件在时间轴上用一条**蓝色**竖线标记

`load`事件同样会在时间轴上用一条**红色**竖线标记

### 3.1浏览器加载流程 ###

*  解析 HTML 结构
 *  加载外部脚本和样式表文件
 *  解析并执行脚本代码 // 部分脚本会阻塞页面的加载
 *  DOM 树构建完成 // DOMContentLoaded 事件
 *  加载图片等外部文件
 *  页面加载完毕 // load事件

### 4.资源内容 ###

默认时间排序，支持点击Time、Size等字段切换排序。

**Name**：资源的名称

**Status**：HTTP状态代码

**Type**：请求的资源的MIME类型

**Initiator**：发起请求的对象或进程。它可能有以下几种值：

*  **Parser（解析器）**：Chrome的 HTML 解析器发起了请求（鼠标悬停显示JS脚本）
 *  **Redirect（重定向）**：HTTP重定向启动了请求
 *  **Script（脚本）**：脚本启动了请求
 *  **Other**：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。

**Size**：服务器返回的响应大小（包括头部和包体），可显示解压后大小

**Time**：总持续时间，从请求的开始到接受响应中的最后一个字节

**Waterfall**：各请求相关活动的直观分析图

### 4.1资源内容操作 ###

按住 shift 键悬停请求上，绿色是上游，红色是下游。

右键资源内容

![img][img 3]

Copy:

![img][img 4]

**Copy Link Address**：将请求的网址复制到剪贴板

**Copy Response**：将响应包体复制到剪贴板

**Copy as cURL**：以 cURL 命令形式复制请求

**Copy All as cURL**：以一系列 cURL 命令形式复制所有请求

**Copy All as HAR**：以 HAR 数据形式复制所有请求

**Save all as HAR with content**：导出数据为HAR格式

### 4.1单个资源内容详情 ###

点击单个资源的Name查看详情

![img][img 5]

**Headers**：查看头部，包括请求头、响应头。

**Preview**：预览响应正文：查看图像用

**Response**：查看响应正文

**Timing**：时间详细分布

**Cookies**：如果选择的资源在Request和Response过程中存在Cookies信息，则**Cookies**标签会自动显示出来，在里面可以查看所有的Cookies信息。

### 4.2Timing ###

![img][img 6]

**Queueing**：浏览器在以下情况下对请求排队

*  存在更高优先级的请求
 *  此源已打开六个 TCP 连接，达到限值，仅适用于 HTTP/1.0 和 HTTP/1.1
 *  浏览器正在短暂分配磁盘缓存中的空间

**Stalled**：请求可能会因 Queueing 中描述的任何原因而停止

**DNS Lookup**：域名解析所耗时间。请求某域名下的资源，浏览器需要先通过DNS解析器得到该域名服务器的IP地址。

**Proxy Negotiation**：浏览器正在与代理服务器协商请求

**Initial Connection / Connecting** 建立连接的时间花费，包含了TCP握手及重试时间。

**SSL** 完成SSL握手的时间花费。

**Request sent**：发送请求所消耗的时间

**ServiceWorker Preparation**：浏览器正在启动Service Worker

**Request to ServiceWorker**：正在将请求发送到Service Worker

**Waiting (Time to first byte (TTFB))** 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。**TTFB**这个部分的时间花费如果超过**200ms**，则应该考虑对网络进行性能优化了

**Content Download**：获取Response响应数据的时间花费。

**Receiving Push**：浏览器正在通过 HTTP/2 服务器推送接收此响应的数据

**Reading Push**：浏览器正在读取之前收到的本地数据

### 5.资源概况 ###

显示总的请求数、数据传输量、加载时间信息。

**DOMContentLoaded**事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。以**蓝色**文字显示确切的时间。

**load**事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。以**红色**文字显示确切的时间。

### 6.设备工具栏 ###

![img][img 7]

点击可以切换到不同的终端进行开发模式，可以选择不同的尺寸比例。

### **7.其他**标签 ###

*  **Elements**:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
 *  **Console**:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
 *  **Sources**:断点调试JS。
 *  **Network**:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
 *  **Timeline**:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
 *  **Profiles**:如果你需要Timeline所能提供的更多信息时，可以尝试一下*Profiles*,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
 *  **Application**:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
 *  **Security**:可以告诉你这个网站的安全性，查看有效的证书等
 *  **Audits**:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

### 8.阻止请求 ###

1.按Control+ Shift+ P或 Command+ Shift+ P（Mac）打开**命令菜单**。

2.键入`block`，选择“ **show request blocking”**，然后按Enter。

3.单击**添加模式**。

4.键入要阻止的请求。

5.单击**添加**。

6.重新加载页面。请注意`请求`日志。红色文本表示资源已被阻止。

7.取消选中**启用请求阻止**复选框。

![在这里插入图片描述][1b3301cf64b544e6806788c7e96e1639.png]

[img]: https://img-blog.csdnimg.cn/img_convert/50587db4de8428d273f962e15a3220c4.png
[img 1]: https://img-blog.csdnimg.cn/img_convert/56301086090bec4c63dedb92f1323f84.png
[img 2]: https://img-blog.csdnimg.cn/img_convert/0e05e90f4bb4a5381d5f69373836bfcd.png
[img 3]: https://img-blog.csdnimg.cn/img_convert/37d8e6eb854bf8622a72684a3ed3465d.png
[img 4]: https://img-blog.csdnimg.cn/img_convert/2cc2c82d0bbdf757975f1e38852eafc0.png
[img 5]: https://img-blog.csdnimg.cn/img_convert/b0e9c9bf5033e1ef8d82ccf9f6fcd477.png
[img 6]: https://img-blog.csdnimg.cn/img_convert/945da3b5a62d1dc7417cecacf7522fd5.png
[img 7]: https://img-blog.csdnimg.cn/img_convert/d63f026be905f15e8f6376ab8b315617.png
[1b3301cf64b544e6806788c7e96e1639.png]: https://img-blog.csdnimg.cn/1b3301cf64b544e6806788c7e96e1639.png