免责声明：内容由作者分享，本文编写由 Jin 代为执笔。
作为开发者，对于Chrome DevTools和Fiddler应该都不会陌生。在日常的开发调试中经常会使用到。
我们利用上面的2个工具的目的其实很简单：
- 方便调试
- 追踪页面加载的过程
- 为页面性能调优提供参考
Chrome Network介绍
在我们的电脑上打开Chrome浏览器，然后在键盘上按下F12 ，就可以调起DevTools面板。选择Network菜单，最后在浏览器地址栏输入网站地址，回车就可以观察到当前页面的所有请求。
我们以www.futu5.com为例：
从上图可以看到，chrome是以表格的形式展现页面加载时候的所有 HTTP 请求。
自定义筛选
第一列固定为http请求的名字，剩下列的展示信息可以通过右键单击表头来自行定义。
从上图可以看出，自定义的选项有很多：
- 请求方法
- 状态码
- 使用的协议
- Scheme
- 域名
- 地址
- 请求的文件类型
- 由谁触发
- Cookies 数目
- 设置的 cookies 的数目
- 资源大小
- 响应时间
- 优先级
- ID
- 响应头
- 瀑布流
通过不同状态可以进行HTTP请求筛选。
查看HTTP请求
针对特定的HTTP请求，可以直接点击 http 请求就可以看到该请求的详细信息。
HTTP请求详细信息的面板
每一个HTTP请求都会有一个属于自己的请求明细面板。
- Headers：查看http请求的头部信息，包括请求头和响应头，还会包含发送请求时带着的参数或数据
- Preview/Response：请求的响应
- Cookies：就是 cookies 列表
- Timing：请求的时间线，表示该请求完整的耗时信息
请求的时间线 Timing
我们先来看，一张关于HTTP请求的生命周期时间轴片段。
请求生命周期的主要阶段包括：
- 重定向
- 立即开始 startTime
- 如果正在发生重定向，redirectStart 也会开始
- 如果重定向在本阶段末发生，将采集 redirectEnd
- 应用缓存
- 如果是应用缓存在实现请求，将采集 fetchStart 时间
- DNS
- domainLookupStart 时间在 DNS 请求开始时采集
- domainLookupEnd 时间在 DNS 请求结束时采集
- TCP
- connectStart 在初始连接到服务器时采集
- 如果正在使用 TLS 或 SSL，secureConnectionStart 将在握手（确保连接安全）开始时开始
- connectEnd 将在到服务器的连接完成时采集
- 请求
- requestStart 会在对某个资源的请求被发送到服务器后立即采集
- 响应
- responseStart 是服务器初始响应请求的时间
- responseEnd 是请求结束并且数据完成检索的时间
耗时时间线各字段含义：
- Queuing （某个请求正在排队）：
请求已被渲染引擎推迟，因为该请求的优先级被视为低于关键资源（例如脚本/样式）的优先级。 图像经常发生这种情况。
请求已被暂停，以等待将要释放的不可用 TCP 套接字。
请求已被暂停，因为在 HTTP 1 上，浏览器仅允许每个源拥有六个 TCP 连接。
生成磁盘缓存条目所用的时间（通常非常迅速） - Stalled/Blocking：请求等待发送所用的时间。 可以是等待 Queueing 中介绍的任何一个原因。 此外，此时间包含代理协商所用的任何时间。
- Proxy Negotiation：与代理服务器连接协商所用的时间。
- DNS Lookup：执行 DNS 查询所用的时间。 页面上的每一个新域都需要完整的往返才能执行 DNS 查询。
- Initial Connection / Connecting：建立连接所用的时间，包括 TCP 握手/重试和协商 SSL 的时间。
- SSL：完成 SSL 握手所用的时间。
- Request Sent / Sending：发出网络请求所用的时间。 通常不到一毫秒。
- Waiting (TTFB)：等待初始响应所用的时间，也称为至第一字节的时间。 此时间将捕捉到服务器往返的延迟时间，以及等待服务器传送响应所用的时间。
- Content Download / Downloading：接收响应数据所用的时间。
Chrome Network工具栏部分
- 过滤：根据 XHR请求/JS文件/CSS文件/img文件/媒体文件/字体文件/文档/Web Sockets/manifest文件/其它文件进行区分，还可以对 data url 进行显示/隐藏
- 屏幕截图：可以确定出屏幕白屏时间，提供优化的参考
- 资源加载时间流：可以确定出各个资源加载的时间，有助于优化
Fiddler 4
左侧请求列表
以表格形式显示Fiddler 工具拦截的 HTTP/HTTPS 请求。
- Result 表示HTTP返回的状态码
- Protocol 表示请求的协议：HTTP/HTTPS
- Host 请求的IP或网址
- URL 请求的路径
- Body 请求资源的大小
- Caching 请求的缓存过期时间或者缓存控制值
- Content-Type 请求响应的类型
- Process 发送此请求的进程：进程ID
- Comments 允许用户为此回话添加备注
- Custom 允许用户设置自定义值
右侧 Inspectors 标签
用于查看会话的内容，上半部分是请求的内容，下半部分是响应的内容。
- 对于每一部分，提供了多种不同格式查看每个请求和响应的内容：
- Header 标签用于显示HTTP请求和响应的头信息
- TextView 标签用于查看 HTML/JS/CSS 等格式的数据
- ImageView 标签用于显示图片格式的数据
- WebForms 标签用于显示请求的表单数据。如登录请求，就可以通过它查查看登录用户名密码信息。它以表格形式显示。
- Raw 标签可以查看原始的符合HTTP标准的请求和响应头
- Auth 标签可以查看授权Proxy-Authorization 和 Authorization的相关信息
- Cookies 标签可以看到请求的cookie和响应的set-cookie头信息
- XML 和 JSON 标签用于显示 XML和JSON格式的数据
设置代理 HTTPS 请求
Fiddler 使用 man-in-the-middle (中间人) 攻击的方式来截取 HTTPS 流量。在 Web 浏览器面前 Fiddler 假装成一个 HTTPS 服务器，在真正的 HTTPS 服务器面前 Fiddler 假装成浏览器。
服务器 ==> 客户端：Fiddler 接收到服务器发送的密文，用对称密钥解开，获得服务器发送的明文。再次加密， 发送给客户端。
客户端 ==> 服务端：客户端用对称密钥加密，被 Fiddler 截获后，解密获得明文。再次加密，发送给服务器端。
由于Fiddler一直拥有通信用对称密钥，所以在整个HTTPS通信过程中信息对其透明。
菜单栏 Tools ==> Fiddler Options 打开fiddler配置 ==> HTTPS 配置项 ==> 勾选“Capture HTTPS CONNECTs” 和“Decrypt HTTPS traffic”
