谷歌浏览器开发者工具怎么看网络请求的耗时_Chrome开发者工具网络请求分析教程
2026-04-08 02:35:54
使用Chrome开发者工具Network面板分析网络请求耗时的步骤如下：
启用并记录网络请求
打开Chrome开发者工具：按下Cmd+Option+I快捷键，或通过菜单栏选择“更多工具” > “开发者工具”。
切换到Network面板，确保左上角的圆形录制按钮为红色点亮状态（表示正在记录）。
勾选Disable cache选项，防止浏览器使用缓存资源，确保每次加载均发起真实网络请求。
刷新页面，观察请求列表中填充的资源条目，每个条目包含详细耗时信息。
解读请求时间线（Waterfall）
瀑布流可视化：请求列表下方的Timeline列以瀑布流形式展示每个请求的时间消耗，点击列标题可按耗时排序，快速定位最慢请求。
悬停查看分阶段耗时：将鼠标悬停在Timeline列的时间条上，显示详细的分阶段耗时提示（如DNS查询、TCP连接等）。
详细视图：点击某一行的Timeline区域，下方展开详细视图，展示从开始到结束的各阶段时间轴，颜色分段代表不同处理阶段（如蓝色为DNS查询，绿色为TCP连接）。
分析各阶段具体耗时
打开请求详情：在请求列表中点击某个资源名称，右侧显示详细信息面板。
切换到Timing标签页：以图表形式展示请求的完整生命周期，包含以下关键阶段：
Queuing（排队）：请求因浏览器并发限制或资源优先级被延迟的时间。
Stalled（停滞）：请求在排队后等待可用连接的时间。
DNS Lookup（DNS查询）：域名解析耗时，若超过几百毫秒可能存在解析问题。
Connecting（连接建立）：TCP握手和SSL协商耗时。
Waiting (TTFB)（首字节时间）：从发送请求到接收第一个字节的时间，过长可能表明服务器处理缓慢。
Content Download（内容下载）：传输响应体的耗时。
瓶颈判断：若某阶段耗时异常（如DNS Lookup过长或Waiting时间过久），可针对性优化。
利用过滤器定位特定请求
关键字过滤：在过滤器输入框中输入api或.js，仅显示包含该文本的资源。
类型筛选：点击XHR、JS、CSS等类型按钮，筛选对应类型的请求。
高级过滤语法：
larger-than:100k：查找大于100KB的资源。
domain:example.com：仅显示来自指定域名的请求。
is:from-cache：过滤出从缓存读取的资源，排除干扰。
模拟弱网环境进行测试
选择预设网络类型：在Network面板的控制器区域找到Online下拉菜单，选择Slow 3G或Fast 3G模拟慢速网络。
自定义配置：点击Add按钮，设置具体的下载速度、上传速度和延迟值。
观察耗时变化：刷新页面后，关注关键资源在弱网下的加载顺序和时间，验证优化效果。
热门标签
