浏览器调试工具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页签展示的是从请求开始到响应结束整个过程每个阶段经历的时间