Chrome调试工具NetWork模块

在项目开发中，不可避免需要调用很多后台服务，资源加载，这些所有的Http请求以及资源加载都能在Chrome的调试工具中的NetWork模块上进行观察，熟练掌握这个NetWork模块，能够更好的完成前后端接口联调，进行一些简单的性能分析，甚至据此作出性能优化，下面将简单介绍我对NetWork模块认识和简要理解。

1.模块概览

2.控制模块

控制模块的概览如图所示，将其划分成了9个功能点，下面一一介绍。

2.1 停止记录

停止记录就是个红色的按钮，当点击后NetWork模块就不会再进行任何的Http请求记录，重新点击后又可以打开记录。

2.2 清除记录

点击清除记录按钮后，资源及服务调用列表中已经记录的所有请求将会被清除。

2.3 截屏模式

截屏模式为一个摄像机的标志，点击后开启截屏模式的功能，当重新刷新页面后，会对你的可视区域进行定时捕获截屏，同时当鼠标移动到截屏图片上时，在时间轴模块中会展示黄色竖线，表示截取这张图片时所处的时间节点。

2.4 过滤栏显示隐藏

点击该按钮可以控制过滤栏的显示隐藏。

2.5 请求列表大图标模式

点击该按钮后资源及服务调用列表每一行的图标变大，同样可视区域所能同时浏览的http请求记录变少，实际用处不是很大。

2.6 时间轴显示隐藏

控制时间轴的显示隐藏

2.7 刷新页面记录列表更新

点击该按钮后控制页面刷新之后，资源及服务调用列表中记录的各种请求信息是否会刷新，默认状态下刷新后将会重新记录新的http请求，但是点击该按钮后，刷新页面后会将上一次的http请求也一并保留下来。

2.8 是否使用缓存

默认状态下，当打开F12调试工具后是不会使用缓存的，这样设置方便记录一些资源的获取情况，因为如果资源都是从缓存获取的话，根本看不出资源获取的快慢性能等。点击后，缓存为可用状态，在F12调试工具状态下亦可使用缓存。

2.9 网速模式

在这个选项下可选择不同的网速，方便测试网站在不同网速下的一些实际操作情况。

3. 过滤

过滤模块可以通过输入或选择一些条件筛选出各种类型的http请求。筛选类型我简单列出如下几种（不完整，有待补充）

通过名称进行模糊筛选
通过Http请求的status状态进行筛选，比如说统一筛选出404的请求或500的请求
通过Http请求的请求方法进行筛选，如GET、POST等
通过Http请求的文件类型进行筛选，如css、jpg、js等
通过协议进行筛选，如http、https等

4. 时间轴

这个模块展现了各种资源加载的时间线，多个时间线出现堆叠是因为进行了同时加载，可以进行框选，选择某个时间段的资源加载以及请求进行查看，其中比较重要的就是时间轴中出现的蓝线和红线，蓝线代表的是DomContentLoaded，红线代表的是Load事件。

DomContentLoaded:Dom加载完全，此时样式表、js、图片等都尚未加载完成，但是此时已经可以对dom元素进行操作了。

Load:此时所有资源都已加载完毕。

5. 资源加载及服务调用列表

这个可以说是整个NetWork模块中最重要的地方了，里面不仅包含了初始化时各种资源加载的具体时间分布，同时也可以在此查看调用后台服务时的具体信息，无论时在页面首屏渲染调优或是在接口联调中，这部分都是很重要的部分，必须了解其中的具体含义。

5.1资源加载时间分布

这部分是比较重要的部分，通过将鼠标放置在Waterfall列上可以看见某个资源的具体加载时长分布情况，通过分析资源加载时间可以了解到某些资源为什么长时间无法加载的原因，从而定位首屏时间慢的具体问题，针对这个问题作出优化改进。

下面，详细介绍一下各个字段的含义，以及某一项耗时过长的原因分析：

Queueing：这个字段表示等待时间，Chrome默认同一时间最多同时加载6个资源，所以当同一时刻请求资源过多时就需要排队等待；如果这个等待时间过长，可能需要考虑进行资源合并了，比如使用精灵图，减少资源的访问次数。

Stalled：这个字段表示HTTP连接建立到请求能够被发送出去的时间；如果这个时间过长可能需要考虑是否访问的服务器那边阻塞了？对高并发处理不到位。

Proxy negotiation：这个字段表示与代理服务器连接所花的时间。

DNS Lookup：执行DNS查询的时间，网页上每一个新域名都要经过DNS查询，当第一次打开页面时这个查询时间会比较长，但是第二次打开后就会有缓存，这个时间会降为0。

Initial connection：建立连接话费的时间，包含了TCP握手及重试时间。

SSL：SSL是在https的加密证书，当访问的资源路径协议为https时就需要加载SSL证书，完成SSL握手。

Request sent：发起请求的时间。

Waiting（TTFB）：服务器接收到请求以后直到返回第一个字节的时间；若该时间较长，则可以考虑是否网络条件较差，或服务器响应慢，这个基本上是网络问题或服务器问题，比如是否发送的某些特定条件导致服务器陷入较深的循环等，需要考虑对网络或服务器进行性能优化了。

Conetn Download：服务器已将数据返回到Response中，获取Response中的数据所花费的时间；若该时间较长，则应该是返回的资源字节数较大，需要较长时间才能下载完成。

5.2资源详细信息

这同样是很重要的部分，当我们点击某一个资源的Name时就会展开该资源的详细信息，这些信息包括Http头信息，返回资源预览，返回资源，cookie信息，资源分布时间。

下面，详细介绍一下各个字段的含义，以及实际调试过程中如何根据这些信息进行调试：

Headers：这其中包含了这个资源访问请求的HTTP头信息，包括请求头、响应头、General和Request-payload。请求头和响应头的具体使用情况就不过多赘述了，这里说一下General和Request-payload。在General中，我们可以看到请求的地址，请求的方式等，有时候一些接口调用404的原因就是Request URL错误了，这是个简单的排错思路。而在Request-payload中则可以看到调用服务或获取资源时前端向后端发送的数据以及数据格式，这点其实挺重要的，在前后端联调中使用较多，方便前端查看是否有向后端传输正确格式的数据。

Preview：这其中就是返回数据的一个预览情况，它和Response的不同之处就在于，返回的数据如果是个json串，在Preview中会被格式化成为前端规范的层叠嵌套的json格式方便浏览查看，而在Response中就是个一长串的字符串，不方便浏览。下面通过图片可以看出两者的区别。

Cookies：如果选择的资源在Request和Response过程中存在Cookies信息，则可以在其中查看具体的cookie消息，暂时使用的较少，没有什么比较多的理解。

Timing：其实就是5.1小节的资源加载时间分布。

6. 当前页面请求信息概览

这一行周其实就笼统的概括了当前页面总共发起了多少个请求，交换了多大的数据量，完成事件，以及触发DOMContentLoaded的时间和触发Load事件的时间。