控制台http 请求

大概屡一下谷歌控制台http请求的各行含义：

一：

f12/alt+f12  打开控制台后，点击network

会看到如下图

下面来解释红框中文字的含义：

1 name:资源名称及url路径

2 status http状态码，常见的状态码

200（状态码） OK（原因短语）

301 - 资源（网页等）被永久转移到其它URL

404 - 请求的资源（网页等）不存在

500 - 内部服务器错误

3 type 请求资源的MIME类型

4 initiator 解释请求是如何发起的，有4种可能

1. Parser：请求是由页面的HTML解析时发送的；
2. Redirect：请求是由页面重定向发送的；
3. Script：请求是由script脚本处理发送的；
4. Other：请求是由其他过程发送的，比如页面里的link链接点击。

5 size 响应头部和响应体结合起来的大小

6 Time是从请求开始到接收到最后一个字节的总时长

7 显示网络请求的可视化瀑布流，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间

内容来源 https://www.cnblogs.com/shenxiaolin/p/6297051.html

 

 二

点击xhr 会显示如图信息；

介绍下 headers，preview ,response,cookies,timing 含义

1 headers  http 报文头部信息

a general 部分  -----主体部分

a1 Request URL:  -----请求资源路径

a2 Request Method:------请求方式

a3Status Code:---请求状态

a4 Remote Address:127.0.0.1:8080  -------请求的远程地址

a5 Referrer Policy:no-referrer-when-downgrade  ------当发生降级（比如从https://跳转到http://）时，不传递referrer 报头

b response headers

b1 connection:close ------服务器给客户端发送信息后断开

b2 Content-Encoding:gzip ----- 传输正文采用的编码格式

b3 content-type:application/json;charset=utf-8------ 返回内容的MIME类型

b4 date:Tue, 16 Apr 2019 01:29:32 GMT------原始服务为发出消息的时间

b5 etag:02132b8fec79c49b795f7726ed238b59------请求变量的实体标签的当前值

b6 transfer-encoding:chunked------文件传输编码

b7 Vary:Accept-Encoding------告诉下游代理是使用缓存响应还是从原始服务器请求

b8 X-Powered-By:Express  表示使用的服务器

c  request headers

c1 Accept-----指定客户端能够接收的内容类型

c2 Accept-Encoding---指定浏览器可以支持的web服务器返回内容压缩编码类型

c3 Accept-Language----Accept-Language

c4 Cache-Control-----指定请求和响应遵循的缓存机制

c5 Connection：keep-alive  -----持久链接

c6 Content-Length:0 ----请求的内容长度

c7 Cookie:-----HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。

c8 Host:127.0.0.1:8080---------指定请求的服务器的域名和端口号

c9 Origin:http://127.0.0.1:8080-----用来说明请求从哪里发起的，包括，且仅仅包括协议和域名。 

c10 Pragma:no-cache  -----用来包含实现特定的指令

c11 Referer:http://127.0.0.1:8080/  告知服务器请求的原始资源的URI，其用于所有类型的请求，并且包括：协议+域名+查询参数

c12 User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36  -----User-Agent的内容包含发出请求的用户信息,比如操作系统、浏览器及版本、浏览器渲染引擎等。

2 preview 

在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。

3 cookie 

如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。

4 timing

在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：

 

参考:

https://www.cnblogs.com/caixw/p/referrer-policy.html

https://www.cnblogs.com/LibraThinker/p/5981346.html

https://blog.csdn.net/wh_xmy/article/details/70873370

https://blog.csdn.net/weixin_41791345/article/details/79546540