【学习笔记】：使用 Chrome 浏览器的网络面板分析 http 请求

PS：最近在极客时间上学习《Web 协议详解与抓包实战》这门视频课，很多东西看了一遍后回想，发现并没有记住什么，遂用笨办法，干脆整理成读书笔记，强迫自己再一次思考和回忆其中的问题与知识点，希望以后能有更多自己的思考在里面。另外这门专栏我很推荐有需要的同学入手，感受颇深。

一.前言

通常我们在分析问题的时候，往往要看 80 端口传输的各类 http 消息，这个过程可以使用 Wireshark，也可以使用浏览器自带的开发者工具。这两种方式各有优势，后者使用起来更简单直观，尤其是针对 Web 界面以及 http 消息的交互。今天这篇文章以 Chrome 浏览器下的开发者工具（即 Network 面板）为例，聊一聊其面板的一些功能，方便大家对 http 协议有更深入的了解，其他浏览器这个功能也是类似的。

二.面板简介

Windows 下打开/关闭浏览器 Network 面板的快捷键是 Control+Shift+I（也可以 F12），Chrome 打开后默认会显示在右边，我们可以点击右上角三个点组成的按钮，控制它显示在页面下方。整体如下图所示，由上至下分别是控制器、过滤器、概览、请求列表、概要

其中：

·控制器：控制面板的外观与功能；

·过滤器：过滤请求列表中显示的资源；（Windows 下按住 Ctrl 可以选择多个过滤器）

·概览：显示 HTTP 请求、相应的时间轴；

·请求列表：默认时间排序，可显示列；

·概要：请求总数、总数据量、花费时间等

三.控制器

·抓包/停止抓包

·清除请求

·需要跨页面加载保存请求：

··启用/停用浏览器缓存：

（勾选后会重新请求而不是使用浏览器缓存）

·模拟慢速网络连接：Throttling，可自定义网速

·显示/隐藏 Filters 窗格

这里重点说一下 Preserve log 和 Throttling 这三个选项。不勾选 Preserve log 时，打开页面中新的连接会显示新的信息，勾选后则会在当前信息后面显示新的链接信息。需要注意的是一些链接会跳转到一个新的窗口，而此时你的开发者工具并不会显示在这个新窗口中，所以 Preserve log 此时就没有用了。

我通过一个简单的演示来说明一下：

1.首先打开一个网站，可以看到第一条请求是一个网址：

2.此时任意点击其他标签链接，可以看到第一条是新的页签请求信息：

3.当勾选 Preserve log 后再次点击切换页签，会看到新页签信息显示在此时信息的后方：

另外我们可以通过 Throttling 选项模拟用户网络比较差的情况。如下图所示，可以选择 Fast 3G/Slow 3G/Offline：

也可以在 Custom 中自己设置，这里就是设置了一个下载、上传 10kb/s，延迟 10ms 的场景，添加后就可以使用此配置打开网页。

四.过滤器

1.过滤器是为了显示我们关心的内容。最常见的一种是按类型过滤，例如 XHR（XML HttpRequest）、JS（JavaScript）？Img（图片）、CSS（布局格式）、Meida（媒体）、Font（字体）、Doc（Document）、WS（WebSocket）等等，也可以按住 Ctrl 键多选。

2.Hide Data URLs：其图标如下图 1 所示，它是将 CSS 图片等小文件用 BASE64 进行编码，嵌入到 HTML 中，以减少 HTTP 请求的数量。图 2 展示了这样一个文件，勾选 Hide Data URLs 后将不再显示。

图 1

图 2

3.过滤器除了按类型外，还可以按照属性来显示。如下图所示，就是过滤显示来自阿里 CDN 的请求：

同时可以输入空格，增加别的过滤条件：（示例中是增加了方法为 GET 的请求）

4.当然还有其他的一些过滤规则。例如使用 is:running 可以查找 WebSocket 资源，is:from-cache 可以查找缓存读出的资源（下图所示，是否是缓存可以关注 Size 这一列）：

此外 larger-than:可以显示大于指定大小的资源（以字节为单位），将值设为 1000 等同于设置为 1k。method:可以指定 http 请求的方法。

五.请求列表

请求列表默认是按照活动时间排序，右键选择“waterfall”可以看到其他的排序方式：

·Start Time：发出的第一个请求位于顶部

·Response Time：开始下载的第一个请求位于顶部（第一次收到响应）

·End Time：完成的第一个请求位于顶部

·Total Duration：一个请求所需要的时间来进行排序(最短最快的请求会放在第一位)

·Latency:等待最短响应时间的请求位于顶部

通常一个请求列表中，包含有一下几个内容：

·Name：资源的名称

·Status：http 的状态码

·Type：请求资源的类型（Javascript 等）

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

1.     Parser（解析器）：Chrome 的 HTML 解析器发起的请求。（鼠标悬停显示 JS 脚本）

2.     Redirect（重定向）：状态码为 301 或 302，http 重定向了请求

3.     Script（脚本）：一些 JS 脚本启动了请求

4.     Other（其他）：一些其他进程或动作发起的请求。例如用户点击链接跳转页面或是在地址栏中输入网址。

·Size：服务器返回的响应大小（包括头部和包体）

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

Waterfall：各请求相关活动的直观分析图（与响应时间有关）

此外单击某个请求可以看到其更详细的信息，包括头部、cookie、预览响应正文或图像、时间等内容。如下图所示，是关于时间的一张截图：

还有一些小技巧，例如按住 shift，鼠标键悬停在某个请求上，显示绿色就代表是其上游，显示红色为下游：

这里鼠标悬停在第三个请求上：

六.关于浏览器的加载时间

1.浏览器加载页面的一个简单流程：

·解析 HTML 的 DOM 结构

·加载外部脚本和样式表文件

·解析并执行脚本代码（部分脚本会阻塞页面的加载）

·DOM 树构建完成（DOMContentLoaded 事件完成，在 timing 列表中显示为蓝色）

·加载图片等外部文件

·页面加载完毕（load 事件完成，在 timing 列表中显示为红色）

2.请求时间的详细介绍

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

·存在更高优先级的请求

·已打开六个 TCP 链接，达到限值（仅适用于 http1.0 和 1.1）

·浏览器正在分配磁盘缓存中的空间

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

DNS Lookup：浏览器正在通过 DNS 解析请求的 IP 地址

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

Waiting（TTFB）：浏览器正在等待响应的第一个字节。TTFB（Time To First Byte，至第一个字节的时间）。此时间包括 1 次往返延迟时间和服务器准备相应所用的时间。

Content Download：浏览器正在接收响应

常见的是这几种，当然还有其他的一些响应这里不再罗列。如下图所示，因为第一个请求，所以在队列中等待时间（Queued）是 0

第二个请求中，在 Queued 排队中已经花费了 179.08ms，发出请求后等待服务器返回的时间（TTFB，绿色）为 53.39ms。