Chrome DevTools 的 Network 还能这么用？

凡间小精灵

假如选出 Chrome DevTools 里最罕用的功用，那 Network 确定是其中之一。
作为前端工程师，咱们看到一个网页会习气性的关上 Chrome DevTools 看下网络申请。
不外虽然天天都在用，仍是有一些初级功用大少数人不知道。
明天就来梳理下那些颇有用然而知道的人对比少的功用：
filter
一个网站会有得多的申请，当你想查找某个申请的时分，是怎么过滤的呢？
症结词搜寻么？
然而症结词搜寻只能按照 url 来过滤。
得多时分这样不太够。
好比我想搜寻视频类型的申请，按照 url 怎么过滤？好比我想搜寻大于 1M 的申请，按照 url 怎么过滤？
这时候候就能用过滤器功用了。
输出 mime-type，加个冒号，Chrome DevTools 就会列出以后网页的申请的一切 mime type，选择某一种，就会过滤出那种 mime type 的申请。
好比过滤 mp4 申请：


过滤 webp 申请：


或者不按照 mime-type，按照资源的大抵分类来过滤：
输出 resource-type，加个冒号或者按右标的目的键，会展现出一切的资源分类，包罗 document、stylesheet、image 等：


其实这就是 Network 的这部份：


并且还能够按住 co妹妹and 键多选。
除了资源类型外，还能够按照形态码过滤：


好比 200、404、500 等，只是我测试的这个页面没有 404 之类的申请。
形态码 0 代表被删除或勾销的申请，网络申请是能够被勾销的，这类就能经过形态码 0 来过滤。
另外还能够按照资源的大小来过滤：
经过 larger-than 指定 100、300k、2M 等大小的限度，就能过滤出大小大于这个值的申请。


还能够按照申请形式，是 GET、POST 等来过滤：


按照是不是包孕某个响应 header 来过滤：
has-response-header:Set-Cookie 过滤出来的就是有设置 cookie 的响应的申请
has-response-header:access-control-allow-origin 过滤出来的就是反对跨域的申请
按照是不是包孕某个 cookie 来过滤：


罕用的过滤器次要有这些：
has-response-header：过滤响应包孕某个 header 的申请method：按照 GET、POST 等申请形式过滤申请domain: 按照域名过滤status-code：过滤响应码是 xxx 的申请，好比 404、500 等larger-than：过滤大小超过量少的申请，好比 100k，1Mmime-type：过滤某种 mime 类型的申请，好比 png、mp4、json、html 等is：过滤某种形态的申请，好比 from cache 从缓存拿的，好比 running 还在运转的resource-type：按照申请分类来过滤，好比 document 文档申请，stylesheet 款式申请、fetch 申请，xhr 申请，preflight 预检申请cookie-name：过滤带有某个名字的 cookie 的申请固然，这些不需求记，输出一个 - 就会提醒一切的过滤器：


然而这个减号之后要去掉，它是非的意思：


和右侧的 invert 选项功用同样。
并且，这些过滤器均可以组合，只有两头加个空格就行。
然而有同窗会问了，这些过滤器里好像不反对按照内容过滤呀。
的确，过滤器不反对这个，然而能够本人搜：


developer resources
看到 sourcemap 有的同窗可能会问，对了，sourcemap 文件为啥在 Network 里看不到呢？
明明会下载 sourcemap 文件，为啥我历来没看到过呢？
其实这个被 Network 过滤掉了，想看到这些文件的申请在另外一个中央：
点击 show console drawer：


关上 developer resources:


就能看到一切的 sourcemap 申请了：


custom columns
申请的列内外展现甚么列是能够自定义的：


好比 cookies 和 set-cookies 就能看到一切携带和设置 cookie 的申请：


勾选 cache-control 能够直观看到不同资源的缓存设置：


申请列表右侧有个 waterfall，默许是展现申请的时间，但我感觉这个没啥用，我更喜爱看申请响应的耗时：


所以我会把它换成 total duration：


这样 waterfall 展现的就是耗时了：


能够直观的看到申请的耗时，还能够排序。我感觉这个数据有用的多。
总结
明天分享了 Network 相干的小技能：
过滤申请能够用 status-code、mime-type、resource-type 等过滤器，有啥过滤器能够经过 - 来提醒，然而 - 是非的意思，之后要去掉，过滤器能够组合来使用。
过滤器不反对内容过滤，这个能够本人搜寻。
sourcemap 文件的申请不显示在 Network 里，这个能够在 dawer 的 develop resources 面板里看到。
Network 的申请列表能够自定义展现的列，waterfall 也能够改展现的信息，我感觉展现 duration 有用的多。
学会了这些 Network 小技能，置信你调试网络申请时效力会更高。