浏览器调试工具Http详解

打开Chrome浏览器，点击F12调出开发者工具，如下图所示：

在 network面板中展示当前操作从请求到响应整个过程。

一.Headers

1.General

(1)Request Url：Client请求地址
(2)Request Method: 请求类型GET、POST等
(3)Status Code: 响应状态码
(4)Remote Address: 域名对应的真实ip:port

2.Request Headers

(1)Accept: 客户端/发送端能够接收的数据类型
例如：text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9
(2)Accept-Encoding: 浏览器可以支持的web服务器返回内容压缩编码类型 gzip, deflate
(3)Accept-Language: 浏览器可接收的语言
例如：zh-CN,zh;q=0.9
(4)Cache-Control: 请求和响应遵循的缓存机制，当前请求的Cache-Control不会影响另一个请求的缓存处理。
(5)Connection: 是否保持与服务器的tcp(传输控制协议)长连接。
keep-alive代表服务会保留当前连接一段时间被其他请求重复使用；
close代表请求之后关闭连接。
(6)Connectin-length：请求体的长度
(7)Content-type: 请求内容的格式/类型
(8)Cookie: 客户端缓存的Cookie，在请求发送时会发送到服务端
(9)Host: 请求的服务器域名
(10)Referer: 当前请求的来源
(11)User-Agent: 发出请求的客户端信息

3.Response Headers

(1)Cache-Control: 请求和响应遵循的缓存机制
(2)Connection: 是否保持与服务器的tcp长连接。keep-alive(默认)、close。
keep-alive代表服务会保留当前连接一段时间被其他请求重复使用；
close代表请求之后关闭连接。
(3)Content-Type: 响应内容的格式/类型
text/html;charset=UTF-8 标识返回的内容是文本类型,html格式
(4)Content-Encoding: web服务器支持的返回内容压缩编码类型
(5)Content-Language: 响应体的语言
(6)Content-Length:响应体的长度
(7)Date:消息发出时间（GMT）
(8)Expires:响应过期时间
(9)Vary:提示使用缓存响应还是从原始服务器请求，即当缓存中存在一个未过期的响应是否能被后续的请求服用

二.Preview页签

Preview页签展示请求响应后的预览

三.Response页签

Response页签显示响应的具体内容

四.Cookie页签

Cookie页签以key-value的形式展示客户端所有的cookie信息

五.Timing页签

Timing页签展示的是从请求开始到响应结束整个过程每个阶段经历的时间