前言

上篇文章发布后还是有不少人收藏的，看到写的文章对部分同学有帮助还是挺开心的，所以这次继续完成network这个比较重要的部分，希望朋友们多多点赞～

一、Network

清除浏览器缓存的操作再常见不过，通常我们会长按刷新按钮（只有在打开控制台才可触发），来选择强清除缓存，如图：

实际上在Network中Disable cahce按钮打开，即可更加快捷强行重新请求资源，避免304之类的缓存请求，也更方便准确获取性能优化数据，如图：

注意：即使在开发环境，也不应当一直开启此选项，因为大多数时候缓存利大于弊，对加载速度的提升十分明显滴，请按需使用。

此功能的作用是对网速进行限制，方便测试一些弱网、无网情况下代码可能暴露的逻辑、白屏渲染问题。如图，有一些预设值，也可以像第二图一样对上传、下载、延迟进行自定义限制，相当方便。

记得刚参加工作的时候，作为一个菜鸡调试接口总是在一堆请求中找想要调试的接口，密密麻麻的请求真是看得头皮发麻，后来还是测试告诉我才知道可以过滤请求的类型，一般调接口直接选Fetch/XHR就行了。

还有hide data urls选项可以勾选上，过滤掉base64类型的请求比如图片等，大多数时候是无用的。

这里也包括很多其他类型的过滤，相信大多数人都应该有了解，只是因为自己的笨拙经历想提一提这里，选项都是所见即所得就不再详述了。

此处可以对http请求在时间轴基础上进行“回放”

如上方动图所示，光标放在时间轴偏下方时，光标样式会变为选择状态，此时可以拖动确定时间窗口的长度，而光标在时间轴偏上方的时候，会变成拖动的样式（手掌），此时可以拖动整个选中窗口来呈现具体某个时间段的请求。

除了基本的展示请求时间情况外，这个功能结合上方preserve log（保留请求日志）选项，可以方便的对比一个页面刷新前后、改动前后的请求情况，因为可以保留上次页面的请求时间轴记录，在性能优化时候便于对比页面前后请求优化情况如何，十分便捷。

有多少同学没有点开过这个菜单？强大的copy选项能够将一个请求的地址、请求头、响应体甚至是发出请求本身的fetch代码直接提取出来，再也不用来回切换tab查阅一个请求的信息了，服务端要请求头信息？直接“copy request heads”

其实上一步的copy as fetch就可以方便的粘贴到console重发请求，不必担心参数问题，它会帮你带上所有的请求信息，而且还能对参数方便的直接进行修改测试，很多时候都不用打开postman了，那叫一个高效～

如果不需要修改参数的话，还有更直接的方法，告别刷新页面吧，点击replay XHR即可；另外如果勾选block request url（domain同理）就可以在不改代码的情况下，阻止对某个接口的请求，特定情况下也十分方便。

下图演示了上述两种操作，可见第一次重发请求成功，第二次重发失败了：

方便的查看当前网站的各种存储信息，不用再去地址栏左上角点击查找cookie等信息了。

本篇先写到这里，基本常用的使用场景就差不多覆盖了，接下来最后一篇单独拆开针对性能方便进行详细的讲解，感谢阅读。