Chrome DevTools 的 Network 还能这么用?

Posted 小生方勤

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 的这部分:

而且还可以按住 command 键多选。

除了资源类型外,还可以根据状态码过滤:

比如 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,1M

  • mime-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 小技巧,相信你调试网络请求时效率会更高。

以上是关于Chrome DevTools 的 Network 还能这么用?的主要内容,如果未能解决你的问题,请参考以下文章

Chrome DevTools 的 Network 还能这么用?

Chrome DevTools Network 标签中的“transferred”和“resources”有啥区别?

Chrome DevTools 的 QueueingStalled解析

DevTools (Chrome 66) 上的新功能

chrome devtools protocol——Web 性能自动化

chrome devtools protocol——Web 性能自动化实践介绍