可通过Chrome Network面板精准定位接口延迟环节：开启录制并勾选Preserve log和Disable cache后刷新页面，点击请求查看Timing瀑布图，分析DNS、TCP、SSL、TTFB及下载各阶段耗时，重点关注TTFB判断后端瓶颈。
如果您在调试网页接口时发现响应缓慢，但无法确定延迟发生在DNS解析、网络连接、SSL握手、服务器处理还是内容下载阶段，则可通过谷歌浏览器控制台的Network面板开启耗时抓包，精准定位各环节耗时分布。以下是具体操作步骤：
一、启用开发者工具并进入Network面板
Network面板是Chrome内置的实时网络监控模块，其时间轴可分解HTTP请求全生命周期，为接口延迟分析提供毫秒级阶段数据支撑。
1、在谷歌浏览器中访问目标网页或应用界面。
2、按下Ctrl+Shift+I（Windows/Linux）或Cmd+Option+I（Mac）打开开发者工具。
3、点击顶部标签栏中的Network选项卡，切换至网络监控视图。
4、确认左上角圆形录制按钮为红色；若为灰色，请单击启动实时捕获。
二、确保捕获完整请求链路
页面跳转、SPA路由切换或异步交互可能触发跨页请求，未启用日志保留将导致请求记录被清空，从而丢失关键延迟上下文。
1、在Network面板顶部Controls区域，勾选Preserve log复选框。
2、在同一区域，勾选Disable cache复选框，强制发起真实网络请求而非读取本地缓存。
3、按下F5或Ctrl+R（Windows）/Cmd+R（Mac）刷新页面，观察Overview时间轴是否出现请求条纹。
三、定位并分析目标接口耗时分布
Timing标签页以可视化瀑布图呈现DNS Lookup、Initial Connection、SSL/TLS Handshake、Request Sent、Waiting (TTFB)、Content Download等阶段，单位为毫秒，可明确区分前端、网络链路与后端服务的延迟归属。
1、在Requests Table中点击目标接口请求行（如状态码为200的XHR或Fetch类型）。
2、在右侧面板中切换至Timing标签页。
3、将鼠标悬停于时间轴任意色块区域，查看该阶段名称与精确耗时数值。
4、重点关注Waiting (TTFB)值——该阶段反映服务器端处理时间，若超过300ms，表明后端逻辑或数据库查询存在瓶颈。
四、排除过滤干扰与隐式屏蔽
残留关键词、误选资源类型或启用屏蔽项会令目标请求从列表中消失，造成“无请求显示”的假象，需还原为全量捕获状态。
1、点击Network面板左上角的漏斗图标（Filter按钮）展开过滤栏。
2、清除Filter输入框中的全部文字。
3、在请求类型筛选区，点击All标签确保所有资源类型均被包含。
4、检查下方三项复选框：取消勾选Has blocked cookies、3rd-party和Blocked。
五、验证扩展与运行环境干扰
广告拦截器、隐私保护类扩展或隐身窗口策略可能主动拦截或隐藏请求上报行为，导致Network面板空白。
1、点击Chrome右上角三点菜单 → 更多工具 → 扩展程序。
2、将所有已启用的扩展临时设为关闭状态。
3、使用快捷键Ctrl+Shift+N打开无痕窗口，访问同一网页。
4、按F12打开开发者工具，切换至Network面板并刷新页面，确认请求是否正常显示。
