Chrome开发者工具Network面板可分析网页资源加载耗时：一、打开目标页后按F12进入Network面板；二、确保录制开启并刷新页面；三、点击资源查看Timing瀑布图；四、右键表头启用DNS、SSL等细分时间列；五、按Waterfall排序或过滤筛选慢资源。
如果您需要了解网页中各类资源（如图片、脚本、样式表）的加载耗时，Chrome浏览器内置的开发者工具提供了直观的Network面板用于实时捕获和分析网络请求时间。以下是具体操作步骤：
一、打开开发者工具并切换到Network面板
该步骤是启动资源加载时间分析的前提，确保Network面板处于激活状态，以便捕获后续页面加载过程中的全部网络请求。
1、在Chrome浏览器中打开目标网页。
2、按下 F12 键，或右键页面任意空白处选择“检查”，调出开发者工具。
3、点击顶部标签栏中的 Network 选项卡，进入网络请求监控界面。
二、启用网络记录并刷新页面
Network面板默认可能未开启实时捕获，需手动确保记录已启用，并通过刷新触发完整加载流程，从而获取准确的资源时间数据。
1、确认左上角的圆形录制按钮显示为 红色，表示记录已开启；若为灰色，点击一次启动捕获。
2、按下 Ctrl + R（Windows/Linux）或 Cmd + R（macOS）强制刷新当前页面。
3、等待页面完全加载完毕，Network列表将自动填充所有已加载资源及其时间信息。
三、查看单个资源的详细加载时间
每个资源行右侧的时间列仅显示总耗时，而更精细的时间分解（如DNS查询、TCP连接、SSL握手、请求发送、内容下载等）需通过瀑布图与Timing标签查看。
1、在Network列表中点击任一资源条目（例如 main.js 或 logo.png）。
2、在下方面板中切换至 Timing 子标签页。
3、观察瀑布图中各颜色区块对应的时间阶段，鼠标悬停可显示精确毫秒值。
四、启用高级时间指标列
默认视图仅显示“Time”总列，但可通过自定义列展示DNS、Connection、SSL、Request、Response等细分耗时，便于定位瓶颈环节。
1、在Network表格头部右键任意列名（如“Name”或“Size”）。
2、在弹出菜单中勾选 DNS Lookup、Connection Start、SSL Setup、Request Sent、Waiting (TTFB)、Content Download 等选项。
3、各资源对应行将显示上述细分时间数值，单位为毫秒。
五、筛选与排序资源以聚焦关键耗时项
当资源数量较多时，可通过排序和筛选快速识别加载最慢的资源，辅助性能问题定位。
1、点击表格头部的 Waterfall 列标题，按加载耗时从长到短排序。
2、使用左上角过滤框输入扩展名（如 .jpg、.js）或关键词（如 api）缩小资源范围。
3、勾选上方过滤栏中的 Largest first 可按资源体积降序排列，结合时间分析大体积资源的影响。
