谷歌浏览器F12中network里headers各项属性的含义

  • 1.背景介绍
  • 2.知识剖析
  • 2.1 找到Network下的Header
  • 2.1.1 General部分: Request URL:资源的请求url
  • 2.1.2 Response Headers:
  • 2.1.3 Response Headers:
  • 2.1.4 Query String Paramters

1.背景介绍

作为一个Web开发人员,日常中与我们开发相关的,就是Chrome的开发者工具。 Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响 应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。 今天就是要简要说说Chrome的开发者工具中Network中header部分。

2.知识剖析

2.1 找到Network下的Header

F12 netwaok看看哪个请求的response有问题_状态码


首先我们打开chrome的开发者工具,选中network,再刷新页面,此时可以在下方看到一个Name,Name对应的是资源的名称及其路径,Status是请求服务器返回的状态码,当状态码为200时,则表示接口配置成功。点击任一文件名,右侧则会出现Header选项。下面让我们来详细看下Header中的各项是什么意思。

F12 netwaok看看哪个请求的response有问题_客户端_02

2.1.1 General部分: Request URL:资源的请求url

Request Method:HTTP方法

Status Code:响应状态码
200(状态码) OK
301 - 资源(网页等)被永久转移到其它URL
404 - 请求的资源(网页等)不存在
500 - 内部服务器错误

2.1.2 Response Headers:

Content-Encoding:gzip 压缩编码类型

Content-Type:text/html 服务端发送的类型及采用的编码方式

Date:Tue, 14 Feb 2017 03:38:28 GMT 客户端请求服务端的时间

Last-Modified:Fri, 10 Feb 2017 09:46:23 GMT 服务端对该资源最后修改的时间

Server:nginx/1.2.4 服务端的Web服务端名

Transfer-Encoding:chunked 分块传递数据到客户端

2.1.3 Response Headers:

Accept:客户端能接收的资源类型

Accept-Encoding:gzip, deflate(客户端能接收的压缩数据的类型)

Accept-Language:en-US,en;q=0.8 客户端接收的语言类型

Cache-Control:no-cache 服务端禁止客户端缓存页面数据

Connection:keep-alive 维护客户端和服务端的连接关系

Cookie:客户端暂存服务端的信息

Host:www.jnshu.com 连接的目标主机和端口号

Pragma:no-cache 服务端禁止客户端缓存页面数据

Referer:http://www.jnshu.com/daily/15052 来于哪里

User-Agent: 客户端版本号的名字

2.1.4 Query String Paramters