Network 作为调试中比不可少的一环,但你对它的了解有多少呢?

打开 Network 的第一印象,满屏都是请求:

上面的截图,好像没有缺少任何有效信息,但是你只看到了自己想看到的,有很多的关键信息在不起眼的位置:

为什么大部分时候没有注意到呢?因为 DOM 结构渲染的时间,和执行 load 脚本的耗时,是在已经完成功能的情况下进行性能优化的时候才会用到。

日常工作的核心,只是通过这个面板上的过滤器,找到那些我们需要的请求,然后查看它的详细信息,判断它是否正确得返回了我们需要的值。

敲黑板

如果细心的话,你会发现,Waterfall 这一栏下,蓝色的线代表的是DOM 加载完毕的节点,而红色的线代表的是 load 脚本执行结束的节点。

# 1. Filter

刚刚提到,面板上已经内置了一个 filter 帮助过滤请求:

过滤器的输入框接受字符串,或正则表达式,会显示匹配条件请求。

你还可以输入 例如 method 或者 mime-type 这样的条件来试试:

如果想筛选,但是又不知道支持哪些筛选条件,可以输入 - 来查看所有的条件:

# 2. Preserve log

Preserve (保留)日志,在什么时候会用到呢?当需要记录页面刷新前后的 log 或者是页面跳转前后的 log 来进行对比调试的时候。

它会一直保留之前的日志,无论是刷新还是页面的跳转:

# 3. 多类型筛选

当你筛选出一大堆的 log 记录,但只想看关于 JavaScriptCSS 的请求的时候怎么做呢?

按住 cmd ,然后鼠标左键选择你想添加筛选的类目:

# 4. 查看未压缩的文件体积

Network 面板中可以很直观的看到文件的体积,但是如果我想看到未压缩的体积呢?

只需要在 Network 面板中设置 Use large request rows :

刷新页面发现,这张图的大小是 29.7kb 但是实际上网络传输的体积只有 29.3kb

原因就在 Response header 里面:这张图在 Nginx 中配置了 gzip 压缩。

微信扫码或搜索: 前端恶霸

在公众号对话框,发送

关注期间 无限制 浏览本站全部内容

内容包括 「Chrome 调试技巧」(持续更新),以及「React 学习指北」(即将上线)

为什么我需要关注?
加入读者交流群 扫描二维码回复 Chrome
Last Updated: 6/30/2020, 12:36:00 PM