更新啦~今天讲讲工作中常用的工具，Chrome中的Network. (基于Chrome 89, 如果交互有出入, 可尝试在其他地方点击)
话不多说, 今天来扒一扒调试细节.
上图是常规的network标签, 先从常规的一些按钮讲起吧.
常用按钮功能
第一排的按钮从左到右分别是记录,清空,过滤器,查询
记录: 打开后开始记录所有请求信息. 清空: 清空之前的所有记录信息. 过滤器: 根据用户输入的过滤信息做一些过滤, 支持正则等. 比如可以根据是不是ajax, js来过滤. 拦截一些请求(也可以根据正则来拦截请求)
查询: 根据你输入的关键字查询所有请求提的内容(与search标签类似).
preserve log: 切换域名也能有请求记录. disable cache: 不使用缓存.
No throttling是用来模拟网络环境的. 比如3g, 4g等, 还有一些自定义网络环境
接着就是这些记录的导入导出
点击下图标签, 也能做一下其他事情
- 展示大小图标, 对比如下:
- 根据iframe, frame等过滤
- 展示timeline
- 做一些页面加载中的截图(一般分析首屏加载的时候会用到)
以上是一些常用的且简单的功能. 各位看官是不是还不过瘾? 来扒一扒不常用却很实用的功能.
实战篇
场景1:
作为刚进入公司的小白, 经常会遇到的是想知道某个请求是哪个文件发出的, 方便自己去修改或者查看. 那么, 你需要的就是这个请求的堆栈信息. 怎么找呢?
- 你需要找到initiator这个tab
- 将鼠标hover在下面的链接上面
- 接下来, 你会看到一大堆堆栈信息, 你可以通过上面的链接去找到对应的文件
tips: 这个时候你会发现, 像jquery这种第三方依赖库我不想看到, 这个时候, 你需要右键这些链接, 点击下图高亮的链接, Chrome会隐藏或者高亮其他堆栈信息
场景2:
定位首屏加载过慢的原因. 造成这个加载缓慢的原因有很多, 其中有一部分原因和网络有关系, 而且在前端方面分析起来更容易, 所以第一反应很多人会从这里入手.
选中某一个时间段, 我们主要关注这个期间的请求, 并点击某一个自己怀疑的请求. 选择右侧timing这个tab.
上图就是简单的一个请求详细信息啦, 这个时候我们来解释一下上面的关键字信息.
第一部分是Queueing, 这个是浏览器将请求放入微任务到这条请求发出去的这段时间, 也就是请求在微任务队列中的时间. (不了解这个的可以去看看event loop) PS: Chrome最大的并发连接数是6个, 也就是说, 最多一次性请求六个静态资源.
第二部分是建立连接的时间啦, 大家都知道, http请求是建立在tcp协议上的, 所以Stalled就是建立连接的时间. Proxy Negotiation指的是与代理服务器连接的时间花费.
第三部分是 Request sent指的是请求发出去的时间, Waiting(TTFB)服务器处理的时间, Content Download是这些数据下载下来的时间
以上就是大概的一整个请求各个部分的含义, 基于各个时间的不同去找对应的原因. 举例: 当Waiting时间过长, 就去找这个请求地址, 去看看服务器是不是做了很多计算, 或者被其他事事物阻塞了, 去解决这个接口的处理问题
场景3:
在做爬虫的时候, 经常需要把整个请求拷贝下来, 用其他工具再发送一次.
选中要拷贝的请求, 选择copy这个选项, 你可以拷贝连接地址, 请求的头部信息, 响应的头部信息, 拷贝资源(就是reponse的body体), 堆栈信息.
也可以拷贝成一个fetch请求, curl命令等等. 方便你去模拟请求.
结尾
其实还有很多功能没有细说, 比如查看这个请求的cookie等等, 只是本人在目前项目中, 很少有后端会去处理cookie信息, 也就很少去查看, 想不出很好的场景去使用这些技能. 所以暂时就不展开去补充, 等到自己频繁去使用的时候, 我再回来补充这边文章. 先mark一下把.
预告
下一篇就是Source了, 这个tab内容机器丰富, 敬请期待!
