浏览器控制台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 发送到服务端的参数