可通过浏览器network面板实时捕获分析所有网络请求：一、启用抓包；二、勾选preserve log保留跨页记录；三、用xhr/fetch/status-code等过滤请求；四、点击请求查看headers/payload/response详情；五、设置限速与禁用缓存模拟弱网。
如果您想观察网页加载过程中发出的所有网络请求，包括HTML、CSS、JS、API接口等，可以通过浏览器控制台的Network面板进行实时捕获和分析。以下是实现这一目标的多种方法：
一、启用Network面板并开始抓包
Network面板默认在打开开发者工具后即处于激活状态，且自动开始录制请求。确保录制按钮为红色表示正在抓包，否则无法捕获任何网络活动。
1、在Chrome浏览器中按下 F12 或右键页面空白处选择“检查”，打开开发者工具。
2、点击顶部导航栏中的 Network 标签页，进入网络请求监控界面。
3、确认左上角圆形录制按钮为 红色；若为灰色，点击一次启动抓包。
二、保留跨页面跳转的请求记录
默认情况下，页面跳转会导致之前页面的请求记录被清空。启用“Preserve log”可使所有历史请求持续保留在面板中，便于追踪表单提交、登录跳转等场景下的完整链路。
1、在Network面板顶部工具栏中，勾选 Preserve log 复选框。
2、执行页面跳转操作（例如点击提交按钮后跳转至新页面）。
3、滚动查看左侧请求列表，确认跳转前的请求（如POST登录请求）仍可见。
三、精准过滤目标请求类型
当页面资源繁多时，可通过内置过滤器快速聚焦关键请求，避免信息过载。支持按资源类型、关键词、响应状态码等多种条件筛选。
1、在Network面板顶部过滤输入框中，输入 XHR 仅显示异步接口请求（常用于API调试）。
2、输入 fetch 或 js 可分别筛选Fetch调用或JavaScript文件请求。
3、输入 status-code:404 可定位所有返回404错误的请求。
四、查看请求与响应的详细内容
单击请求列表中的任意一项，右侧将展开该请求的完整详情视图，涵盖请求发起路径、传输数据、服务端响应及性能耗时等关键维度。
1、在左侧请求列表中，点击目标请求的 名称（Name）列。
2、切换至右侧的 Headers 标签，查看完整的请求头与响应头信息。
3、切换至 Payload 标签，检查POST或PUT请求的请求体内容（如JSON参数或表单数据）。
4、切换至 Response 标签，确认服务器返回的原始响应数据。
五、模拟弱网环境与禁用缓存调试
为验证页面在不同网络条件下的行为，可在Network面板中手动设置限速与禁用本地缓存，确保每次请求均从服务器获取最新资源。
1、点击Network面板左上角的 网络条件图标（⚙️），打开网络设置面板。
2、在“Network conditions”区域，取消勾选 Disable cache 以外的选项，再勾选该项以强制绕过浏览器缓存。
3、在“Throttling”下拉菜单中，选择预设网速（如 Slow 3G）或自定义带宽与延迟参数。
