众所周知，Network的功能强大，很多开发者或者是网站从业人员都是需要会熟练使用它，通过分析它能获取很多重要信息，所以它很重要。

打开方式

常用打开方式，是键盘F12键位或者鼠标右键选择检查。打开后如下图所示

常用

看上图中请求列表区域，以列表显示的，就是通过分析这块数据，来判断网站、接口、静态文件等异常情况，也可以根据列表数据来看具体的细节 如上图所示，我们能看到每一个请求的详细数据（所以有些敏感数据是需要进行加密的，不然一目了然），同时可以看到接口传参、请求头以及返回值，来判断接口调用是否OK。 还可以通过Timing去分析，接口、页面加载快慢，详细分析可以知道慢在什么地方，是慢的DNS解析，还是程序代码亦或者是数据传输过程慢。

Network组成结构

Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。

• 控制器：主要是一些设定以及相关功能
• 过滤器：过滤请求列表中显示的资源,按住Command（Mac）或Ctrl（Window/Linux），然后点击过滤器可以同时选择多个过滤器。
• 概览：显示HTTP请求、响应的时间轴。
• 概要：请求总数、总数据量、总花费时间等。
• 请求列表：默认时间排序，可选择显示列。可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

控制器

直接截图来说明控制器： 补充：offline 表示离线模式

过滤器

过滤器最前面的输入框可以输入关键词，下面请求列表会进行过滤。输入框之后的都是快速过滤按钮，只看js,css,img等。

请求列表

不管是控制器、过滤器都是最终为了展示请求列表的，毕竟请求才是核心，所以详细说明下请求列表这块。 列表默认展示 name、status、type 、Initiaor 、size 、time 、 waterfall几个字段组成，同时你可以根据你的需要，右击标题行，调整字段，还可以设置排序字段以及响应头。 还能够查看请求上下游，按住 shift 键悬停请求上，绿色是上游，红色是下游。 基本组成字段的含义：

Name：资源的名称
Status：HTTP状态代码
Type：请求的资源的MIME类型
Initiator：发起请求的对象或进程。它可能有以下几种值：
Size：服务器返回的响应大小（包括头部和包体），可显示解压后大小
Time：总持续时间，从请求的开始到接受响应中的最后一个字节
Waterfall：各请求相关活动的直观分析图

单个请求

请求列表中点击单个请求，获得如下页面：

从图上可以看到如下信息：

查看头部，包括请求头、响应头。

查看Cookie

预览响应正文：查看图像用

查看响应正文

时间详细分布

导出数据为HAR格式

查看未压缩的资源大小：Use Large Request Rows

浏览器加载时间（概览、概要、请求列表）DOMContentLoaded 事件的颜色设置为蓝色，而load事件设置为红色

将请求数据复制到剪贴板

	Copy Link Address：将请求的网址复制到剪贴板
	Copy Response：将响应包体复制到剪贴板
	Cop as cURL：以 cURL 命令形式复制请求
	Copy All as cURL：以一系列 cURL 命令形式复制所有请求
	Copy All as HAR：以 HAR 数据形式复制所有请求

Waterfall 详解

每个请求都有一个 Waterfal diagrams(瀑布图) 图上字段表示的意思:

• Queueing. 出现下面的情况时，浏览器会把当前请求放入队列中进行排队
  • 有更高优先级的请求时.
  • 和目标服务器已经建立了6个TCP连接（最多6个，适用于HTTP/1.0和HTTP/1.1）
  • 浏览器正在硬盘缓存上简单的分配空间
• Stalled. 请求会因为上面的任一个原因而阻塞
• DNS Lookup. 浏览器起正在解析IP地址.
• Proxy negotiation. The browser is negotiating the request with a proxy server.
• Request sent. The request is being sent.
• ServiceWorker Preparation. The browser is starting up the service worker.
• Request to ServiceWorker. The request is being sent to the service worker.
• Waiting (TTFB). 浏览器等待响应第一个字节到达的时间. 包含来回的延迟时间和服务器准备响应的时间.
• Content Download. The browser is receiving the response.
• Receiving Push. The browser is receiving data for this response via HTTP/2 Server Push.
• Reading Push. The browser is reading the local data previously received.
• DNS Lookup - 在浏览器和服务器进行通信之前, 必须经过DNS查询, 将域名转换成IP地址. 在这个阶段, 你可以处理的东西很少. 但幸运的是, 并非所有的请求都需要经过这一阶段.
• Initial Connection - 在浏览器发送请求之前, 必须建立TCP连接. 这个过程仅仅发生在瀑布图中的开头几行, 否则这就是个性能问题(后边细说).
• SSL/TLS Negotiation - 如果你的页面是通过SSL/TLS这类安全协议加载资源, 这段时间就是浏览器建立安全连接的过程. 目前Google将HTTPS作为其 搜索排名因素 之一, SSL/TLS 协商的使用变得越来越普遍了.
• Time To First Byte (TTFB) - TTFB 是浏览器请求发送到服务器的时间+服务器处理请求时间+响应报文的第一字节到达浏览器的时间. 我们用这个指标来判断你的web服务器是否性能不够, 或者说你是否需要使用CDN.
• Downloading - 这是浏览器用来下载资源所用的时间. 这段时间越长, 说明资源越大. 理想情况下, 你可以通过控制资源的大小来控制这段时间的长度.