开发者常常依赖 Chrome DevTools 来分析和优化网络请求。这个工具伴随着开源浏览器内核 Chromium 被包括了 Edge、Opera、QQ 浏览器和 360 浏览器等常见浏览器所采纳和提供。在这篇文章中,我们将介绍 Chrome DevTools 中的 网络面板 (Network) 功能,并提供一些有用的技巧来帮助您优化网络请求。
在资源面板查看文件时,Reveal in Network panel 可以定位资源属于那个请求:
点开后可以根据 Fetch/XHR、JS、CSS 等等选项请求过滤请求:
按住 Ctrl (Mac 用 Command) 进行点击可以多选,比如同时过滤 JS 和 CSS 类型的文件:
同时提供 Filter 输入框,可以根据输入的名称进行筛选,当然,你也可以写正则表达式,比如用 /(css|js)$/ 来同时筛选出 css 和 js 文件:
前面加个短横 - 还可以取反:
刷新页面所有请求都会重置掉,这对调试接口非常不方便,因为我们经常需要做前后请求对比,打开保存日志(Preserve Log)选项,将网页请求记录一直保存下来。
缓存对用户体验来说非常重要,但对开发来说非常不需要。打开禁止缓存(Disable Cache),拒绝所有缓存。
网络面板提供了网页加载截图, 方便你查看网页一步步的加载过程:
在分析网页性能的时候,可以通过禁止某些请求来做控制变量法:
这个方法只能单个单个禁止请求,Chrome 还提供了个根据模板禁止请求,首先 Ctrl + Shift + P(Mac 用 Command + Shift + P )运行命令菜单(Run command),搜索 Show Network request blocking 并运行它:
比如禁止所有 CDN 文件,可以这样写: https://cdn.heighliner.cloud/*
在这里插入图片描述
这里虽然叫做模板(Pattern),但是并不能用正则表达式,只能用通配符(*),弱鸡的 Chrome。
大多数情况下,浏览器会发起畅通无阻的网络请求,但某些场景下我们希望它们不畅通且有阻。
节流(Throttling)处可以控制网络的快慢,默认提供快速 3G、慢速 3G、离线(Offline)。
当然你也可以进行自定义,其实无非就是控制下载(Download)、上传(Upload)和延迟(Latency)的值。
网络面板有多个地方展示 DOMContentLoaded 和 load 事件的时间点,蓝线对应 DOMContentLoaded 事件,红线代表 load 事件。
话说 Chrome 这里有个 BUG,暗黑模式和明亮模式下颜色表现不太一致。
在这里插入图片描述
在分析一个网站性能时候,有几个总数据值得参考。
第一个是网站总的请求数量,这里显示为 33:
第二个是传输的资源大小,这里为 731kB:
第三个是传输过来的资源解压之后的大小,这里为 1.9MB:
打开 Use large request rows ,可以详细看到每个请求解压前后的资源大小。
在这里插入图片描述
前后端接口联调对线的时候,经常需要查询接口详情,扔一两张截图或许方便但不够详细,HAR(HTTP Archive)是一种基于 JSON 格式的存档文件,你可以把所有 HTTP 请求下载成 HAR 文件:
扔给对方导入:
一键重置网络面板所有记录,还你干净如初。
欢迎大家关注我们公众号定期推荐有趣的开发者工具,也欢迎大家加入我们微信群一起讨论和交流:
页面更新:2024-04-01
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号