浏览器控制台Network下各项属性的含义

浏览器控制台Network下各项属性的含义

作用:

• 可以查看调取接口是否正确，后台返回的数据；
• 查看请求状态、请求类型、请求地址

1. console

1.console.log() 用于输出普通信息；
2.console.info() 用于输出提示性信息；
3.console.error() 用于输出错误信息；
4.console.warn() 用于输出警示信息；
5.console.froup() 用于输出一组信息的开头；
6.console.groupEnd() 结束一组输出信息(这里的括号内可以不写内容,上面的括号中要写上内容)；

2. Network-Headers

首先打开控制台，找到Network. 刷新页面可以看到Name,Name对应的是资源的名称及路径, Status是请求服务器返回的状态码，一般情况下当状态码为200时，则表示接口匹配成功。点击任一文件名，右侧会出现Header选项。

2.1 Network-- Header-- General

Request URL: 资源请求的url;
Request Method: 请求方法（HTTP方法）;
Status Code: 状态码;
                      200(状态码) OK
                      301 - 资源（网页等）被永久转移到其它URL
                      404 - 请求的资源（网页等）不存在
                      500 - 内部服务器错误(后台问题)
Remote Address: 远程地址;
Referrer Policy:  控制请求头中 refrrer 的内容;
                               包含值的情况: 
                               enum ReferrerPolicy {
                                    "", 设为空串则默认按照浏览器的机制设置 referrer的内容，默认情况下是和 no-referrer-when-downgrade设置得一样
                                    "no-referrer", 不显示 referrer的任何信息在请求头中
                                    "no-referrer-when-downgrade",  默认值。当从https网站跳转到http网站或者请求其资源时（安全降级HTTPS→HTTP），不显示 referrer的信息，其他情况（安全同级HTTPS→HTTPS，或者HTTP→HTTP）则在 referrer中显示完整的源网站的URL信息
                                    "same-origin",  表示浏览器只会显示 referrer信息给同源网站，并且是完整的URL信息。所谓同源网站，是协议、域名、端口都相同的网站
                                    "origin",  表示浏览器在 referrer字段中只显示源网站的源地址（即协议、域名、端口），而不包括完整的路径
                                    "strict-origin",  该策略更为安全些，和 origin策略相似，只是不允许 referrer信息显示在从https网站到http网站的请求中（安全降级）
                                    "origin-when-cross-origin",  当发请求给同源网站时，浏览器会在 referrer中显示完整的URL信息，发个非同源网站时，则只显示源地址（协议、域名、端口）
                                    "strict-origin-when-cross-origin",  和 origin-when-cross-origin相似，只是不允许 referrer信息显示在从https网站到http网站的请求中（安全降级）
                                    "unsafe-url"  浏览器总是会将完整的URL信息显示在 referrer字段中，无论请求发给任何网站
                                };
    补充: 什么是referrer?
          当一个用户点击页面中的一个链接，然后跳转到目标页面时，本变页面会收到一个信息,即用户是从哪个源链接跳转过来的。
           也就是说当你发起一个HTTP请求，请求头中的 referrer 字段就说明了你是从哪个页面发起该请求的;
       

2.2 Response Headers

Access-Control-Allow-Origin: 请求头中允许设置的请求方法
Connection:
content-length:
content-type:  客户端发送的类型及采用的编码方式
Date:  客户端请求服务端的时间
keep-alive: 
Vary:
x-content-type-options: 
x-download-options: 
x-frame-options: 
x-readtime:
x-xss-protection: 
Last-Modified:  服务端对该资源最后修改的时间
Server:  服务端的web服务端名
Content-Encoding:  gzip 压缩编码类型
Transfer-Encoding:chunked:  分块传递数据到客户端

2.3 Request Headers

Accept: 客户端能接收的资源类型
Accept-Encoding:  客户端能接收的压缩数据的类型
Accept-Language:  客户端接收的语言类型
Authorization: 
Cache-Control: no-cache 服务端禁止客户端缓存页面数据
Connection: keep-alive 维护客户端和服务端的连接关系
Cookie:客户端暂存服务端的信息
Content-Length: 
Host:  连接的目标主机和端口号
Origin: 
Pragma: no-cache 服务端禁止客户端缓存页面数据
Referer:  来于哪里(即从哪个页面跳转过来的)
Sec-Fetch-Dest: 
Sec-Fetch-Mode: 
Sec-Fetch-Site: 
User-Agent:  客户端版本号的名字

Query String Paramters 发送到服务端的参数