网络面板中记录了你的应用（页面）发起的所有网络操作信息，包括耗时，HTTP请求头，响应头，cookie，WebSocket数据包，等等~~它们将为你的应用在进行网络性能调优时提供全方位的数据支撑，例如：
- 哪个资源响应（得到第一个数据包）最慢；
- 哪个资源加载耗时最久；
- 谁发起了一个网络请求；
- 获取一个后端数据的各个网络阶段的耗时情况。
关于资源的测时API
网络面板是基于Resource Timing API来获取每个请求的耗时细节的，下图是这个API提供的面向一次HTTP请求所收集的各个时刻点的数据及其含义：
其实这个API不仅能用在DevTools底层，在Chrome中，它以“window.perfomance”全局对象的方法的方式暴漏给开发者。“window.perfomance.getEntries()”方法会返回“资源耗时对象”数组，数组中每个对象对应了页面上的一次请求，对象内包含了对应请求的耗时数据。
试一下在当前页面的DevTools控制台面板中输入下面代码：
window.performance.getEntries()[0]
你将看到如下图所示的返回值：
注意：上图中时间戳的单位为微秒。
网络面板预览
网络面板会自动记录在DevTools开启后的所有活跃的网络请求。第一次切换到该面板你很可能看到一个空的列表，别着急，你只需要刷新页面即可~~
在网络面板的列表中，每次请求都会对应列表中的一行信息，每行信息都包含下述表中的几列：
| 字段 | 描述 |
|---|---|
| Name and Path | 每次请求的名称和请求url |
| Method | HTTP请求类型(GET,POST,PUT,DELETE,etc) |
| Status and Text | http的状态码和状态消息 |
| Domain | 请求资源的域 |
| Type | 请求的MIME类型 |
| Initiator | 发起请求的对象或进程，通常是下面几种类型之一:
|
| Cookies | 请求携带的cookie数目 |
| Set-Cookies | 响应设置的cookie数目 |
| Size and Content | Size为响应头和响应体的长度总和；Content为响应体解码后的内容长度。如果本次请求的资源来自浏览器缓存，那么这列对应的值会显示为：“(from cache)”。 |
| Time and Latency | Time表示请求消耗的总时间，从请求发起到接受完最后一个字节之间的全部时间； Latency表示的是从发起请求到接受响应的第一个字符之间的时间。 |
| Timeline | 时间轴列显示了一个所有请求的时间轴视图。 |
需要注意的是：
- 上面表格中介绍的部分列并不是默认显示的，可以通过右键点击列头选择是否显示对应列；
- 一些列包含了主字段和副字段（例如Time and Latency），此时你需要切换面板底部的“列表详情显示开关”；
- 你可以通过点击对应的列表来进行排序。
如果页面变得足够复杂，外链资源足够多，那么你将看到网络面板记录了非常多的请求数据，有静态文件的，有异步的，有样式文件，有脚本文件等等，为了方便阅读，你可以根据类型来过滤分类，只需要根据选择底部工具条中对应的分类即可，目前支持的分类有：Documents, Stylesheets, Images, Scripts, XHR（常用）, Fonts, WebSockets, and Other。
时间轴视图
前面提到的一些网络面板的功能多数用于调试，而现在要讨论的时间轴呢，一般用来辅助性能调优，它把从为当前页面加载得第一个资源（通常是dom文件）的http请求开始一直到页面所有资源加载完毕的耗时数据以图表的形式展现出来，每个资源的耗时数据以一个颜色条代表，不同的颜色代表不同的资源类型。每个颜色条中空心的（颜色发虚）的部分为延迟等待时间，实心的部分表示花费在接受响应数据的耗时。如下图：
我们来看一下在时间轴视图中不同的颜色条代表什么资源：
| Documents（html） | |
| Stylesheets（css） | |
| Images（jpg,png,etc） | |
| Scripts（js） | |
| XHR（ajax） | |
| Fonts（字体） | |
| Other |
当你把鼠标指向时间轴中的某一行（但不是该行的颜色条上）上，你就会看到该请求对应的延迟和下载耗时分别显示在颜色条中对应的部分，如下图：
而如果你把鼠标指向某个颜色条上，该请求对应的完整的耗时数据就会显示出来，看：
除了每个资源的颜色块外，时间轴视图上还显示了两条线（蓝色和红色，就好像黑客帝国中给neo的小药丸一样~）。
蓝色线表示的是DOMContentLoaded事件触发的时刻，该事件代表DOM加载并解析完毕的时间。
红色线表示的是load事件触发的时刻，该事件代表的是该页面所有资源下载完毕的时刻。
这对页面的性能调优非常有用~~
拷贝和保存监控的网络数据
右键点击网络面板列表中的任何一个资源，你会看到一个菜单，如下图所示：
我们来分别介绍一下其中的一些选项：
- Open Link in New Tab：在新标签页中打开这个链接；
- Copy Link Address：拷贝链接到系统剪贴板；
- Copy Request Headers：拷贝该请求的请求头信息到系统剪贴板；
- Copy Response Headers：拷贝该请求的响应头信息到系统剪贴板；
- Copy as cURL：以cURL命令行格式拷贝该请求到系统剪贴板；
- Replay XHR：如果该请求为ajax，那么让浏览器重新发送这个异步请求。
上述这些功能会帮你节省非常多的时间哟~~
网络数据资源的细节
当你点击网络面板列表中的任何一行时，你会看到该请求的详细信息，包含：
- HTTP请求和响应头信息
- HTTP响应数据的预览
- HTTP响应数据
- Cookie数据
- WebSocket消息
- 请求的网络耗时细节
要解释清楚上面的每一项，可能并不是一个简单的事儿，因为这要求你对HTTP协议有一定的了解！
不过随着你的开发经验越来越丰富，你会发现这些选项卡成为了你调试和调优你的应用的强大武器！
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
