Chrome DevTools调试技巧之Network

      以CSDN首页为例，来列举Network面板的功能，我将Network面板的功能总结为三个方面。

一、查看静态资源请求和分布

      切换到Network面板，打开CSDN首页，资源加载情况如下，调节时间轴，可以筛选出某个时间段内的请求。

      菜单栏最左侧的红色圆点表示是否记录网络log，默认开启记录，当关闭时将不再记录页面中的网络请求。

      第二个图标表示清空网络log记录。

      点击第三个图标，可以打开过滤菜单，可以输入请求或文件名称进行筛选，或点击后面的文件类型，筛选出不同类型的请求。

      点击第4个搜索图标，可以打开search面板。search与filter的区别在于，filter只能按照请求URL来筛选请求，但search可以搜索到请求和响应中的内容。“Aa”表示是否匹配大小写，“.*”表示根据某种格式匹配。

      后面的选项，preserve log表示保留log。如果不勾选，当切换页面时，上个页面的log将被清除掉；勾选后，切换页面时，上个页面的log依然存在。

      Disable cache表示禁止缓存，勾选后，页面将不再从缓存中获取文件。

      点击online，打开模拟网络选项，可以调试网页在不同网络状况下的表现情况。这对移动端的调试非常有用。

      在请求列表的头部右击，可以在下拉菜单中选择想要显示的列。

      网络面板的最下方，展示了整个页面的请求概况，下图可以看出，CSDN首页共发起了297个请求，网络传输508KB，一共加载资源22.2MB，所有请求完成的时间是5.19s，DOM构建完成的时间是2.06s，所有外部资源加载完成的时间是5.10s。

      DOMContentLoaded对应jQuery里的$(document).ready()，Load对应jQuery里的$(document).load()，这两个时间差大致是外部资源的加载时间。

二、查看请求和响应信息

      使用Network面板最多的地方莫过于调试aJax请求了。点开一个请求，可以看到4个标签。Headers里面展示了一些请求的基本信息，包括请求头、响应头等。

      Preview和Response都是对返回信息的展示。区别是Response展示的是请求返回的原始内容；Preview是根据原始内容的不同类型进行的直观展示。

      Timing里面列举了一些请求的参数。

      除了Timing，也可以在请求列表的Waterfall中看到请求的参数。

      Queued表示队列时间，由于单个域名最多只能并发6个请求，所以不是所有的请求都是在页面初始就开始加载的。Started表示开始请求的时间。可以根据每个请求各阶段花费的时间来制定优化方案。

      同时，打开设置-选中Capture screenshots，再加载页面时，可以捕捉到每一帧的页面截图，这种可视化的形式，可以让我们清楚的了解到每一时刻的网络情况。

      此外，在与后端联调过程中，若需要重新发起请求，除了刷新页面或重新触发请求事件外，还可以使用更简单的方式。右击需要重新发起的请求，选择Replay XHR，就可以重新发起请求了。