浏览器 f12 的功能详解之Network

作者:清风拂面 | 创建时间: 2023-05-10
浏览器f12是开发调试工具 Network是查看网络请求的...
浏览器 f12 的功能详解之Network

操作方法

打开浏览器,按f12,点击Network,可以查看相关网络请求信息,记得是打开f12之后再刷新页面才会开始记录的

查看Network基本信息,请求了哪些地址及每个URL的网络相关请求信息都可以看的到 URL,响应状态码,响应数据类型,响应数据大小,响应时间

请求URL可进行筛选和分类 选择不同分类,查看请求URL,方便查找

也可以直接Filter搜索查询相关URL 可以输入关键字或者正则表达式进行查询

Waterfall能分割重要的请求耗时,查看具体请求耗时在哪个地方 鼠标指到相关区域可以看到具体耗时

我们具体分析下里面每个各代表什么意思,分别耗时多少,通过这个来分析服务器到底是哪个环节出了问题 Queueing 是排队的意思 Stalled 是阻塞  请求访问该URL的主机是有并发和连接数限制的,必须要等之前的执行才能执行之后的,这段时间的耗时 DNS Lookup 是指域名解析所耗时间 Initial connection 初始化连接时间,这里一般是TCP 3次连接握手时间 SSL https特有,是一种协议 Request sent 发送请求所消耗的时间 Waiting 等待响应时间,这里一般是最耗时的 Content Download 下载内容所需要消耗的时间

我们了解了上面每个耗时的时间,才能根据对应时间来修改和优化服务器访问的速度 留个作业,大家看看下面这张图,分别都耗时在哪里呢,我们又该怎么定位问题及解决方案呢?我们之后讲解

点击展开全文

更多推荐