主流浏览器（Chrome/Firefox/Edge）均自带开发者工具，通过「网络（Network）」面板可精准定位加载缓慢的资源，配合过滤、排序和时间线分析，能快速找到性能瓶颈。
一、打开浏览器开发者工具
通用操作：打开目标网站后，按 F12 键，或右键点击页面空白处选择「检查」（Inspect）。
快捷键补充：Chrome/Edge 可按 Ctrl+Shift+I（Windows）或 Command+Option+I（Mac），Firefox 快捷键相同。
面板切换：在打开的开发者工具中，找到并点击「网络（Network）」标签，进入网络分析面板。
为了检测更准确，勾选禁用缓存，再点击重新加载页面。
二、配置面板以捕获完整加载数据
启用关键设置：
勾选左上角「禁用缓存」（Disable Cache），模拟首次访问场景，避免缓存干扰结果。
勾选左上角「保留日志」（Preserve log），防止页面跳转时丢失请求记录。
选择网络模式：
顶部导航栏找到「节流」（Throttling）下拉框，默认「无限制」（No throttling）。
如需模拟真实网络，可选择「3G」「慢速 4G」，或自定义带宽和延迟。
清空历史记录：点击面板左上角「清除」按钮（垃圾桶图标），确保只记录当前刷新的请求。
三、捕获并查看资源加载数据
触发加载：点击浏览器「刷新」按钮，或按 F5，面板会实时捕获所有网络请求。
理解核心列含义：
- 「名称」（Name）：资源名称及路径，悬停可查看完整 URL；
- 「状态」（Status）：显示页面状态码，200表示正常访问；
- 「类型」（Type）：资源类型（图片 img、脚本 js、样式 css、接口 fetch 等）；
- 「大小」（Size）：资源体积，过大体积易导致加载延迟；
- 「时间」（Time）：资源加载总耗时，数值越大加载越慢。
四、快速定位慢加载资源
排序筛选：
点击「时间」（Time）列标题，按耗时降序排列，顶部即为加载最慢的资源。
点击「大小」（Size）列标题，可筛选出体积过大的资源（通常是慢加载元凶）。
类型过滤：
顶部筛选器中勾选「Img」「JS」「CSS」等标签，可单独查看某类资源的加载情况。
高级过滤：在搜索框输入语法，如 larger-than:100K 筛选大于 100KB 的资源，domain:laoxuehost.com 仅显示特定域名请求。
五、深入分析慢加载原因
查看单个资源详情：点击目标慢资源，在下方弹出的面板中选择「计时」（Timing）标签，查看各阶段耗时：
