chrome浏览器调试功能之后端篇

chrome浏览器调试功能之后端篇

作为后端开发人员，可能有很多同学不怎么了解chrome调试功能，而即将成为大神的我们，怎么也得会，知其然更要知其所以然，今天我带领大家好好的梳理一下，chrome浏览器调试，个人把它分成了前端功能和后端功能，在百度上也有很多关于该功能的使用说明，而其中很多都是抄来抄去的，很多概念模糊不清，甚至错误的也发了出来，鄙人实在看不下去了，就来给大家讲解我们PHP工程师需要用到的功能，重点在后面的TimeLine;

 

好了，闲话少说，首先打开chrome浏览器，按F12键进入调试模式，选择NetWork,打开一个网页，这里我以百度为例，请大家看看下面这张图片

一.NetWork里面分别出现以下信息，这里我一个个给大家讲讲

 

Name and Path:请求资源的路径和名称

 

Method:请求方法：如GET,POST

 

Status and Text:HTTP请求状态码和文本信息

 

Type:请求的MIME类型

 

Initiator:发送请求的对象,主要包含Parser和Script

我们来看看上图第二个请求资源中的Initiator一列,显示的是www.baidu.com/:4[Parser],这里表示该css文件是从百度首页HTML中第四行解析出来的,大家不妨查看一下网页源代码看看

有的资源Initiator一列为Script，表示该资源是通过某JS文件加载的，例如一些图片

 

Size and Content:size是http请求中传输的真实大小，包括响应头和响应体；content表示响应体解压后的大小（如果有压缩的话，一般为gzip压缩），如果采用了gzip编码传输，content比size大，否则content小于size

我们可以看到上图中的第一个资源，也就是百度首页的HTML代码，size为32.1KB，Content为138KB，说明使用请求该资源时，服务器采用压缩的方式传输资源，大小为32.1KB，我们来点击一下这个资源看看里面的headers,看下图，说明百度采用的是gzip方式压缩的

经过浏览器解压后真正的内容大小为138KB，这是减少服务器带宽压力的一种方式，这种功能Nginx和Apache都是支持的;在第一张图片中的第8,9个资源的size为from cache,说明该资源是从缓存中读取的；想要关闭缓存功能，将图中的Disable cache勾上就可以;

 

Time and Latency:Time表示从发送请求到接收响应的最后一个字节所花的时间，即请求一个资源花的总时间，Latency表示从发送请求到接收响应的第一个字节所花的时间，即延迟；那么Time减去Latency就反应带宽问题了，包括客户端和服务器带宽;在时间上chrome又多了一个TimeLine走势图，下面来看看时间到底花在哪里了;

TimeLine:响应时间的详细报告(上图),其中包括

Stalled:是浏览器得到要发出这个请求的指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接时间等;

Proxy Negotiation:与代理服务器的连接时间;

DNS LookUp:表示DNS查找时间,如果第一次访问的是域名就需要查找,IP地址的话不需要，上图中没有这个参数，说明我本地缓存了百度域名的服务器地址，浏览器不需要查询，直接通过IP请求服务器;

Initail Connection:建立连接的时间，包括TCP，SSL握手/重试和谈判

Request sent:发送请求到服务器的传输时间，即上传时间;

Waiting(TTFB):发送请求后到收到响应的第一个字节所花费的时间，TTFB（time to first bytes）;这是服务器优化的重要指标，服务器优化的目的就是减少这个时间;

Content Download:获取响应资源时间，下载时间，即上面的Time减去Latency的时间,这是反应带宽的重要指标