Chrome调试工具NetWork模块

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事件的时间。