为何新版Chrome DevTools Performance面板不显示网络请求？

问题背景 #

我正在学习一份4年前的Web性能教程，旧版Chrome DevTools的Performance面板会在时间轴中直接展示CSS、JS等网络请求，与CPU、渲染及JavaScript执行任务并列。但在当前使用的Chrome 129.0.6668.59版本中，我检查了Performance面板的设置（面板下方的设置图标），找不到在时间轴启用网络追踪的选项；虽能在Network面板单独捕获网络活动，但无法像教程那样在Performance面板中显示。我附上了旧版Chrome DevTools的教程截图与当前环境的截图用于对比。

解决步骤 #

Chrome DevTools后续版本调整了Performance面板的网络追踪开启方式，不再通过面板设置，而是在录制前配置追踪项：

• 打开Performance面板，点击录制按钮（圆形红点）左侧的勾选框图标（更多选项入口）
• 在弹出的菜单中勾选**「Network」选项**
• 重新启动性能录制，此时时间轴会显示网络请求条目，与CPU、渲染任务并列展示

排查要点 #

如果仍未显示网络请求，检查以下几点：

• 是否在录制前正确勾选了Network选项（录制后调整无效）
• 是否过滤了特定资源类型，导致部分请求未被捕获
• 尝试清空缓存后刷新页面再录制，避免缓存请求不被追踪

内容的提问来源于stack exchange，提问作者Nukri Tusishvili