使用 Chrome 的 Network 面板分析 HTTP 报文

博主： deepfal
发布时间：2019 年 12 月 09 日
1381 次浏览
1 条评论
6586字数
分类：技巧杂烩

<div class="tip share">请注意，本文编写于 1809 天前，最后修改于 957 天前，其中某些信息可能已经过时。</div>

# 使用 Chrome 的 Network 面板分析 HTTP 报文

---

相信在您使用 CDN 的过程中，有的时候需要检查访问资源的属性，例如 HTTP 标头、内容、大小等等等信息，或者想查看资源的缓存时间是多久，又或者需要确认网页中各个元素的加载时间。

那么今天为您介绍一个非常实用的工具，Chrome 浏览器的 Network 面板。它属于谷歌开发者工具的其中一个套件功能，其中包含了大量实用的前端调试工具。

本篇教程适用于任何使用 Chromium 内核的浏览器，Microsoft Edge 和 Firefox 也有类似的控制面板，在此不再赘述。

### 如何打开开发者工具面板

1.使用快捷键打开。

Control+Shift+J 或者 F12 (Windows)

Command+Option+J (Mac)

2.通过 `更多工具` - `开发者工具` 打开。

![chrome-network](https://cc.deepfal.cn/2020/04/18/c5cbb15c5f462.png)

访问[谷歌官方介绍文档](https://developers.google.com/web/tools/chrome-devtools/network/)。

### Network 面板

打开开发者工具后，切换到 Network 面板，面板的构成可查看下图：

![chrome-network](https://cc.deepfal.cn/2020/04/18/37c065031317f.png)

* 控制器：可以开启/关闭 Network 工具的网络活动记录功能，以及其它一些配置选项。
* 过滤器：过滤请求列表中显示资源。
* 概览：以图形化的方式，显示 HTTP 请求响应的时间轴。
* 请求列表：网页中每一个资源请求记录，默认时间排序，点击可查看详细信息。
* 概要：包含了当前抓取的请求数，传输大小以及传输耗时等信息。

接下来我们就来认识一下各个模块。

##### **控制器**

![chrome-network](https://cc.deepfal.cn/2020/04/18/453e197912029.png)

从左至右按钮的功能依次是：

* 停止/开始抓包，红色圆圈代表正在抓包；
* 清除请求列表中的所有请求；
* 屏幕截图；
* 隐藏/显示过滤器窗格；
* 查找搜索；
* 增大请求列表每一行的行高；
* 隐藏/显示概览窗格
* 按照框架来整合资源
* 跨页面加载保存请求
* 停用浏览器缓存
* 模拟离线访问
* 模拟慢网速访问，可自定义网速

我们可以简单的来演示一下其中几个功能的使用。

**场景一**：如何模拟在没有缓存的情况下访问网页？

我们可以打开控制器的 `Disable cache` 功能，重新刷新页面，浏览器会模拟不带缓存的请求访问，保证每一个请求都是向网络中发起的。

![chrome-network](https://cc.deepfal.cn/2020/04/18/a060ef41c0ffd.gif)

**场景二**：请求列表只记录当前页面的请求，如果我点击了一个链接就会清空之前的记录，能否在点击链接跳转之后，依旧保存之前的请求记录呢？

我们可以打开控制器的 `Preserve log` 功能，这样在点击链接跳转到新的页面后，跳转前的请求记录依旧会保留，方便我们跟踪请求响应。

![chrome-network](https://cc.deepfal.cn/2020/04/18/436b398755e4a.gif)

##### **过滤器**

我们在访问一个网站的时候，可能会有几十个或者上百个请求，这些请求中有些是我们关心的，有些是我们不需要的，这个时候就可以快速的使用过滤器来筛选出我们关心的那些请求。

过滤器常见的过滤方式就是 `按类型`过滤。

![chrome-network](https://cc.deepfal.cn/2020/04/18/8c84c3af20eed.png)

默认过滤中已经内置几种类型，比方说我们可以筛选出 JS 类的请求、图片类的请求或者是 WebSocket 类型的请求，按住 `Ctrl（Windows）`或者 `Command（Mac）`可以同时选择多个过滤类型。

那么 `Hide data URLs` 选项是什么意思呢？

网站开发者很多时候会将一些小的图片或者 CSS 脚本，以 BASE64 格式嵌入到 HTML 中，以减少 HTTP 请求数。当勾选了 `Hide data URLs` 选项后，就可以隐藏掉请求列表中的像 `data:` 或者 `blob:` 类请求。

![chrome-network](https://cc.deepfal.cn/2020/04/18/e14c6c50c1cf9.gif)

除了以上几个 Chrome 提供的过滤器以外，还可以非常灵活的在过滤框中使用 `过滤属性`进行请求日志的筛选。

常见的过滤属性可参考下表。

<figure>
<table>
<thead>
<tr>
<th style="text-align: left;">属性</th>
<th style="text-align: left;">释义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">domain</td>
<td style="text-align: left;">仅显示来自指定域的资源，可以使用通配符(*)指定多个域</td>
</tr>
<tr>
<td style="text-align: left;">has-response-header</td>
<td style="text-align: left;">显示包含指定 HTTP 响应头的资源</td>
</tr>
<tr>
<td style="text-align: left;">is</td>
<td style="text-align: left;">使用 `is:running` 可以查找 WebSocket 资源，`is:from-cache` 可以查找缓存读取资源</td>
</tr>
<tr>
<td style="text-align: left;">lager-than</td>
<td style="text-align: left;">显示大于指定大小的资源(以字节为单位)。将值设定为 1000 等同于设置为 1k</td>
</tr>
<tr>
<td style="text-align: left;">method</td>
<td style="text-align: left;">显示指定 HTTP 方法类型资源</td>
</tr>
<tr>
<td style="text-align: left;">mime-type</td>
<td style="text-align: left;">显示指定 MIME 类型的资源</td>
</tr>
<tr>
<td style="text-align: left;">mixed-content</td>
<td style="text-align: left;">`mixed-content:all` 显示所有混合内容资源,`mixed-content:displayed` 仅显示当前的混合内容资源</td>
</tr>
<tr>
<td style="text-align: left;">scheme</td>
<td style="text-align: left;">显示未通过保护的 http 资源访问请求 `scheme:http` 或受保护的 https 访问资源 `scheme:https`</td>
</tr>
<tr>
<td style="text-align: left;">set-cookie-domain</td>
<td style="text-align: left;">显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源</td>
</tr>
<tr>
<td style="text-align: left;">set-cookie-name</td>
<td style="text-align: left;">显示具有 Set-Cookie 标头并且 cookie 名称与指定值匹配的资源</td>
</tr>
<tr>
<td style="text-align: left;">set-cookie-value</td>
<td style="text-align: left;">显示具有 Set-Cookie 标头并且 cookie 值与指定值匹配的资源</td>
</tr>
<tr>
<td style="text-align: left;">status-code</td>
<td style="text-align: left;">仅显示 HTTP 状态代码与指定代码匹配的资源</td>
</tr>
</tbody>
</table>
</figure>

* 多属性之间通过空格实现并列条件判断（AND）操作

**场景一**：打开又拍云官网的时候，我们想筛选网页中不同域名的请求资源，就可以在过滤框中输入 `domain:`，Chrome 会帮我们自动补齐相关的域名信息。

![chrome-network](https://cc.deepfal.cn/2020/04/18/91926b0b38d9a.gif)

**场景二**：打开的网页中，如何查看哪些请求使用了缓存？`is:from-cache`

![chrome-network](https://cc.deepfal.cn/2020/04/18/1ca7aae211e9a.gif)

##### **请求列表**

请求列表默认是按照资源请求发起的时间升序排列的，我们也可以选择按列排序。另外也可以在 `Waterfall` 列上右键，按照活动时间来进行排序。

![chrome-network](https://cc.deepfal.cn/2020/04/18/9a456cae83dd8.gif)

* Start Time：第一个发出的请求位于列表顶部
* Response Time：第一个开始下载的请求位于列表顶部
* End Time：第一个完成的请求位于列表顶部
* Total Duration：连接设置时间和请求/响应时间最短的请求位于列表顶部
* Latency：等待最短响应时间的请求位于列表顶部

下面介绍一下列表中每一列的含义。

<figure>
<table>
<thead>
<tr>
<th>列名</th>
<th style="text-align: left;">释义</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td style="text-align: left;">请求资源的名称</td>
</tr>
<tr>
<td>Status</td>
<td style="text-align: left;">HTTP 状态码</td>
</tr>
<tr>
<td>Type</td>
<td style="text-align: left;">请求资源的 MIME 类型</td>
</tr>
<tr>
<td>Initiator</td>
<td style="text-align: left;">发起请求的对象或进程</td>
</tr>
<tr>
<td>Size</td>
<td style="text-align: left;">服务器返回的响应大小（包括头体和包体），可显示解压后大小</td>
</tr>
<tr>
<td>Time</td>
<td style="text-align: left;">总持续时间，从请求的开始到接收响应中的最后一个字节</td>
</tr>
<tr>
<td>Waterfall</td>
<td style="text-align: left;">各请求相关活动的直观分析图</td>
</tr>
</tbody>
</table>
</figure>

Initiator 可能有的值：

<figure>
<table>
<thead>
<tr>
<th>值</th>
<th style="text-align: left;">释义</th>
</tr>
</thead>
<tbody>
<tr>
<td>Parser</td>
<td style="text-align: left;">解析器，Chrome 的 HTML 解析器发起的请求。</td>
</tr>
<tr>
<td>Redirect</td>
<td style="text-align: left;">重定向，HTTP 重定向发起的请求</td>
</tr>
<tr>
<td>Script</td>
<td style="text-align: left;">脚本，脚本启动的请求</td>
</tr>
<tr>
<td>Other</td>
<td style="text-align: left;">一些其它进程或者动作发起的请求，例如用户点击链接跳转到页面或者在地址栏中输入网址</td>
</tr>
</tbody>
</table>
</figure>

如果在请求列表 Initiator 列中看不到对应的值，可以在控制器中打开大请求列显示模式

我们也可以添加其它的一些列目录，在请求列上右键呼出菜单，可看到更多列选项。

![chrome-network](https://cc.deepfal.cn/2020/04/18/eb8bf1f20529c.png)

此外我们也可以配置自定义列，在 `请求列上右键呼出菜单` - `Response Headers` - `Manage Header Columns` 中添加想列出的响应头信息。

![chrome-network](https://cc.deepfal.cn/2020/04/18/1002e013bff21.png)

**场景**：如何自定义显示请求经过了 CDN 的哪些节点？

CDN 会在每一个响应头中添加上 Via 响应头，那么我们就可以自定义请求列表显示 Via 列。

![chrome-network](https://cc.deepfal.cn/2020/04/18/6b81b9f5d5c9c.gif)

点击具体的链接，则可以打开请求内容详情，在内容详情中我们可以执行以下操作：

* 查看 HTTP 请求/响应头部
* 查看 cookie
* 预览响应正文，例如查看图像
* 查看响应正文
* 时间详细分布
* 将请求数据复制到剪贴板
* 查看未压缩的资源大小，`Use Large Request Rows`

**场景一**：查看请求的响应与请求报文

![chrome-network](https://cc.deepfal.cn/2020/04/18/55a9e970c4fea.png)

[点击此处]查看常见响应码释义

**场景二**：预览图片

![chrome-network](https://cc.deepfal.cn/2020/04/18/35c5d0e07c64b.png)

**场景三**：将一个请求导出为 cURL 命令

在请求上右键呼出菜单，选择 `Copy` 选项。

![chrome-network](https://cc.deepfal.cn/2020/04/18/96b03d52e434d.gif)

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

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

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

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

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

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

**场景四**：如何查看请求的耗时分布？

首先我们先来回顾一下浏览器加载资源的流程：

* 加载外部脚本和样式表文件
* 解析并执行脚本代码 (部分脚本会阻塞页面的加载，也就是我们感觉到的页面加载很卡)
* DOM 树构建完成（DOMContentLoaded 事件）
* 加载图片等外部资源
* 页面加载完毕（load 事件）
* 将请求数据复制到剪贴板
  </div>

那么怎么解释下面这个请求的耗时情况呢？

![chrome-network](https://cc.deepfal.cn/2020/04/18/da1d8be74fcdb.png)

* Queueing：排队耗时

浏览器在以下几个情况下会对请求进行排队处理:

1.存在更高优先级的请求；

2.连接源（服务器）已经打开了六个 TCP 连接，达到限制。这种情况仅限于 HTTP/1.0 和 HTTP/1.1；

3.浏览器正在短暂分配磁盘缓存中的空间。

* Stalled：请求挂起耗时

请求可能会因为上述 Queueing 描述的任何原因而中止。

* DNS Lookup

浏览器解析请求的 IP 地址耗时。

* Initial Connection

TCP 与服务器连接建立耗时。

* SSL/TLS Negotiation

浏览器建立安全连接耗时。

* Proxy Negotiation

浏览器与代理服务器的协商处理耗时。

* Request Sent

请求发送耗时。

* ServiceWorker Preparation

浏览器启动 Service Worker。

* Request to ServiceWorker

将请求发送到 Service Worker。

* Waiting(TTFB)

浏览器等待第一个响应返回的字节的耗时。TTFB 表示 Time To First Byte（至第一字节的时间），其中包括 1 次往返延迟时间及服务器准备响应所用的时间。

* Content Download

浏览器接收响应实体耗时。

* Receiving Push

浏览器通过 HTTP/2 服务器的推送接收响应数据耗时。

* Reading Push

浏览器读取之前获取到的本地数据耗时

更多关于时间记录的详情可[点击此处](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing-explanation)访问文档

以上就是对 Chrome 的 Network 面板的介绍，通过一些场景来帮助大家理解使用面板的功能。相比起 Wireshark 等一些网络抓包工具而言，Chrome Network 更为简单易用，查看 HTTP/2 或者 HTTPS 等请求报文也更为方便，对于前端展示或者网络连接产生的一些问题定位也更为轻松快捷。

参考文章:[又拍云-热门工具](http://upyun.com)

最后修改：2022 年 04 月 10 日

如果觉得我的文章对你有用，请随意赞赏~

1 条评论

the ^O^ pet
December 11th, 2019 at 05:19 pm

到此一游~ :huaji:

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

使用 Chrome 的 Network 面板分析 HTTP 报文

deepfal • 2019 年 12 月 09 日

<div class="tip share">请注意，本文编写于 1809 天前，最后修改于 957 天前，其中某些信息可能已经过时。</div>

# 使用 Chrome 的 Network 面板分析 HTTP 报文

---

本篇教程适用于任何使用 Chromium 内核的浏览器，Microsoft Edge 和 Firefox 也有类似的控制面板，在此不再赘述。

### 如何打开开发者工具面板

1.使用快捷键打开。

Control+Shift+J 或者 F12 (Windows)

Command+Option+J (Mac)

2.通过 `更多工具` - `开发者工具` 打开。

![chrome-network](https://cc.deepfal.cn/2020/04/18/c5cbb15c5f462.png)

访问[谷歌官方介绍文档](https://developers.google.com/web/tools/chrome-devtools/network/)。

### Network 面板

打开开发者工具后，切换到 Network 面板，面板的构成可查看下图：

![chrome-network](https://cc.deepfal.cn/2020/04/18/37c065031317f.png)

接下来我们就来认识一下各个模块。

##### **控制器**

![chrome-network](https://cc.deepfal.cn/2020/04/18/453e197912029.png)

从左至右按钮的功能依次是：

我们可以简单的来演示一下其中几个功能的使用。

**场景一**：如何模拟在没有缓存的情况下访问网页？

我们可以打开控制器的 `Disable cache` 功能，重新刷新页面，浏览器会模拟不带缓存的请求访问，保证每一个请求都是向网络中发起的。

![chrome-network](https://cc.deepfal.cn/2020/04/18/a060ef41c0ffd.gif)

**场景二**：请求列表只记录当前页面的请求，如果我点击了一个链接就会清空之前的记录，能否在点击链接跳转之后，依旧保存之前的请求记录呢？

我们可以打开控制器的 `Preserve log` 功能，这样在点击链接跳转到新的页面后，跳转前的请求记录依旧会保留，方便我们跟踪请求响应。

![chrome-network](https://cc.deepfal.cn/2020/04/18/436b398755e4a.gif)

##### **过滤器**

过滤器常见的过滤方式就是 `按类型`过滤。

![chrome-network](https://cc.deepfal.cn/2020/04/18/8c84c3af20eed.png)

那么 `Hide data URLs` 选项是什么意思呢？

![chrome-network](https://cc.deepfal.cn/2020/04/18/e14c6c50c1cf9.gif)

除了以上几个 Chrome 提供的过滤器以外，还可以非常灵活的在过滤框中使用 `过滤属性`进行请求日志的筛选。

常见的过滤属性可参考下表。

* 多属性之间通过空格实现并列条件判断（AND）操作

![chrome-network](https://cc.deepfal.cn/2020/04/18/91926b0b38d9a.gif)

**场景二**：打开的网页中，如何查看哪些请求使用了缓存？`is:from-cache`

![chrome-network](https://cc.deepfal.cn/2020/04/18/1ca7aae211e9a.gif)

##### **请求列表**

请求列表默认是按照资源请求发起的时间升序排列的，我们也可以选择按列排序。另外也可以在 `Waterfall` 列上右键，按照活动时间来进行排序。

![chrome-network](https://cc.deepfal.cn/2020/04/18/9a456cae83dd8.gif)

下面介绍一下列表中每一列的含义。

Initiator 可能有的值：

如果在请求列表 Initiator 列中看不到对应的值，可以在控制器中打开大请求列显示模式

我们也可以添加其它的一些列目录，在请求列上右键呼出菜单，可看到更多列选项。

![chrome-network](https://cc.deepfal.cn/2020/04/18/eb8bf1f20529c.png)

此外我们也可以配置自定义列，在 `请求列上右键呼出菜单` - `Response Headers` - `Manage Header Columns` 中添加想列出的响应头信息。

![chrome-network](https://cc.deepfal.cn/2020/04/18/1002e013bff21.png)

**场景**：如何自定义显示请求经过了 CDN 的哪些节点？

CDN 会在每一个响应头中添加上 Via 响应头，那么我们就可以自定义请求列表显示 Via 列。

![chrome-network](https://cc.deepfal.cn/2020/04/18/6b81b9f5d5c9c.gif)

点击具体的链接，则可以打开请求内容详情，在内容详情中我们可以执行以下操作：

**场景一**：查看请求的响应与请求报文

![chrome-network](https://cc.deepfal.cn/2020/04/18/55a9e970c4fea.png)

[点击此处]查看常见响应码释义

**场景二**：预览图片

![chrome-network](https://cc.deepfal.cn/2020/04/18/35c5d0e07c64b.png)

**场景三**：将一个请求导出为 cURL 命令

在请求上右键呼出菜单，选择 `Copy` 选项。

![chrome-network](https://cc.deepfal.cn/2020/04/18/96b03d52e434d.gif)

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

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

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

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

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

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

**场景四**：如何查看请求的耗时分布？

首先我们先来回顾一下浏览器加载资源的流程：

那么怎么解释下面这个请求的耗时情况呢？

![chrome-network](https://cc.deepfal.cn/2020/04/18/da1d8be74fcdb.png)

* Queueing：排队耗时

浏览器在以下几个情况下会对请求进行排队处理:

1.存在更高优先级的请求；

2.连接源（服务器）已经打开了六个 TCP 连接，达到限制。这种情况仅限于 HTTP/1.0 和 HTTP/1.1；

3.浏览器正在短暂分配磁盘缓存中的空间。

* Stalled：请求挂起耗时

请求可能会因为上述 Queueing 描述的任何原因而中止。

* DNS Lookup

浏览器解析请求的 IP 地址耗时。

* Initial Connection

TCP 与服务器连接建立耗时。

* SSL/TLS Negotiation

浏览器建立安全连接耗时。

* Proxy Negotiation

浏览器与代理服务器的协商处理耗时。

* Request Sent

请求发送耗时。

* ServiceWorker Preparation

浏览器启动 Service Worker。

* Request to ServiceWorker

将请求发送到 Service Worker。

* Waiting(TTFB)

浏览器等待第一个响应返回的字节的耗时。TTFB 表示 Time To First Byte（至第一字节的时间），其中包括 1 次往返延迟时间及服务器准备响应所用的时间。

* Content Download

浏览器接收响应实体耗时。

* Receiving Push

浏览器通过 HTTP/2 服务器的推送接收响应数据耗时。

* Reading Push

浏览器读取之前获取到的本地数据耗时

更多关于时间记录的详情可[点击此处](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing-explanation)访问文档

参考文章:[又拍云-热门工具](http://upyun.com)

使用 Chrome 的 Network 面板分析 HTTP 报文

1 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

CVE-2020-0796漏洞复现——<蓝屏+GetShell>

悬剑武器库3.0-公益版

Switch 大气层 Atmosphere 如何开启隐身模式(隐藏序列号)

宝塔7.5.1白嫖专业版插件破解教程

Bandizip v7.15 官方专业版(含破解补丁)

CVE-2020-0796漏洞复现——<蓝屏+GetShell>

JAVA 14环境变量配置

Debian10创建lvm物理卷/创建vg物理卷组/创建lv逻辑卷/xfs格式化/uuid永久挂载

WaterDrop纯净生存服务器——使用PCL启动器的登录方法

typora配合Lsky pro+PicGo实现图片一键上传到自己服务器同时获得外链

使用 Chrome 的 Network 面板分析 HTTP 报文

1 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

使用 Chrome 的 Network 面板分析 HTTP 报文

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款