首先打开谷歌浏览器开发者工具并进入Network面板,可实时捕获页面网络请求;通过录制按钮控制记录时机,执行操作后系统自动追踪资源加载过程;利用过滤功能按类型或关键词快速定位目标请求;点击具体条目可在Headers、Response、Timing等标签页查看请求头、响应内容及性能耗时;最后右键保存所有记录为HAR文件,便于后续分析与共享。

如果您在开发或调试网页时需要分析页面的网络请求情况,可以使用谷歌浏览器自带的开发者工具中的网络面板来捕获和查看所有资源加载过程。通过该面板,您可以检查请求头、响应内容、加载时间等关键信息。
本文运行环境:MacBook Pro,macOS Sonoma
一、打开Network面板
要使用Network功能,首先需要启用开发者工具并切换到对应的标签页。该面板是实时监控网络活动的基础入口。
1、在谷歌浏览器中按下 F12 或右键点击页面选择“检查”以打开开发者工具。
2、点击顶部标签栏中的 Network 选项,进入网络监控界面。
二、开始记录网络请求
Network面板默认会自动开始记录,但有时需要手动控制记录时机以精确捕获特定操作下的请求数据。
1、确认左上角的圆形录制按钮为红色,表示正在记录;若为灰色,请点击启动录制。
2、执行您想要监测的操作,例如刷新页面、提交表单或点击按钮触发异步请求。
三、过滤和查找特定请求
当页面请求较多时,可通过内置过滤器快速定位目标资源类型或名称,提高排查效率。
1、在Network面板上方的过滤框中输入关键词,如文件名、域名或接口路径,系统将自动匹配显示相关条目。
2、点击 Filter 按钮展开过滤选项,可按类型(XHR、JS、CSS、Img等)筛选请求。
四、查看请求详情
选中某一条请求后,右侧会展示详细的请求与响应信息,帮助分析问题根源。
1、点击目标请求,在右侧面板中查看 Headers 标签页,了解请求头和响应头的具体内容。
2、切换至 Payload 或 Response 标签页,查看发送的数据或服务器返回的结果。
3、在 Timing 标签页中观察各个阶段耗时,判断是否存在连接延迟或等待响应过长的问题。
五、保存和导出日志数据
为了便于后续分析或与团队共享问题,可将当前捕获的网络活动保存为标准格式文件。
1、在Network面板空白处右键,选择 Save all as HAR 将全部请求导出为HAR文件。
2、使用第三方工具(如HAR Analyzer)导入该文件进行深入分析或生成可视化报告。











