需启用Firefox开发者工具网络面板并配置捕获与分析功能。具体包括:一、快捷键打开网络面板并激活录制;二、设置过滤器和显示字段;三、刷新页面捕获请求并查看详情;四、导出HAR文件;五、启用高级选项如捕获浏览器请求和禁用缓存。

如果您希望在火狐浏览器中查看网页加载过程中的全部网络请求、响应头、状态码、资源大小及耗时等详细信息,则需启用并正确使用内置的开发者工具网络面板。以下是实现该目标的具体操作步骤:
一、打开开发者工具并切换至网络面板
Firefox 内置的“网络”(Network)面板是专用于捕获和分析页面所有网络请求的调试界面,它会在页面加载或用户交互触发新请求时实时记录每一条 HTTP/HTTPS 请求及其完整生命周期数据。
1、在任意网页中按下 Ctrl + Shift + E(Windows/Linux)或 Cmd + Option + E(macOS)快捷键,直接打开开发者工具并自动定位到“网络”面板。
2、若开发者工具已打开但未显示网络面板,点击顶部标签栏中的 网络(Network) 选项卡即可切换。
3、确保左上角的录制按钮(圆形红点图标)处于高亮激活状态;若为灰色,则点击一次以开始捕获请求。
二、配置网络面板过滤与显示选项
通过设置过滤器与列项,可快速聚焦关键请求类型(如 XHR、JS、CSS、图片),并查看所需字段(如时间、大小、状态码),提升分析效率。
1、在面板顶部过滤栏中输入关键字,例如 XHR 可仅显示异步 AJAX 请求,输入 fetch 或 ws 可分别筛选 Fetch API 调用或 WebSocket 连接。
2、右键点击请求列表顶部的列标题行,在弹出菜单中勾选或取消勾选字段,如 方案(Protocol)、传输大小(Transferred)、内容大小(Content)、时间(Time) 等。
3、点击任一请求行,右侧将展开详细视图,包含 标头(Headers)、预览(Preview)、响应(Response)、Cookies、安全(Security) 等子标签页。
三、捕获并分析特定请求的完整流程
网络面板支持逐帧回放请求时序、查看重定向链路、检查请求发起堆栈,适用于定位接口失败、延迟过高或跨域问题。
1、刷新当前页面或执行触发网络请求的操作(如点击按钮、提交表单),确保请求被完整捕获。
2、在请求列表中找到目标条目,双击其名称或点击右侧展开箭头,进入详情页。
3、在 标头(Headers) 标签页中,查看请求方法、URL、请求头(Request Headers)、响应头(Response Headers)及完整的请求/响应原始文本(Raw)。
4、在 时间线(Timeline) 子视图中,观察 DNS 查询、TCP 连接、TLS 握手、请求发送、等待响应、内容下载各阶段耗时分布。
四、保存与导出网络日志用于协作分析
当需将网络活动记录提供给后端或测试团队复现问题时,可导出标准 HAR(HTTP Archive)格式文件,该文件兼容 Chrome DevTools、Fiddler、Wireshark 等多种分析工具。
1、在网络面板右键空白区域,选择 全部保存为 HAR 文件(Save All as HAR)。
2、指定保存路径并确认,生成的 .har 文件包含全部捕获请求的时间戳、标头、响应体(若未禁用)及元数据。
3、如仅需导出某单个请求,可在该请求行上右键,选择 复制为 cURL 或 复制请求标头,便于命令行复现或比对。
五、启用高级捕获功能以覆盖特殊场景
默认情况下,网络面板不捕获扩展、浏览器自身请求及某些后台服务通信;启用额外选项后,可覆盖更广范围的网络活动。
1、点击网络面板右上角齿轮图标(设置),勾选 启用请求拦截(Enable request blocking)以手动阻止指定请求进行调试。
2、勾选 捕获浏览器请求(Capture browser requests)以显示 Firefox 自身发起的请求(如更新检查、同步请求)。
3、勾选 禁用缓存(在开发者工具打开时)(Disable cache when toolbox is open),确保每次刷新均发出真实请求而非读取本地缓存。








