Firefox网络监控功能内置在开发者工具中，专门用于捕捉和分析所有HTTP请求，无需安装任何第三方插件即可完成抓包、性能分析和调试工作。
Firefox网络监控怎么用？打开与基础操作
如果你从未用过Firefox的网络监视器，最直接的方式是在任意网页右键点击“检查元素”，然后切换到“网络”标签，或者通过菜单栏：工具>Web开发者>网络，也可以使用快捷键Ctrl+Shift+E（Windows/Linux）或Cmd+Opt+E（Mac），打开后页面会自动开始录制,刷新页面就能看到所有请求。
界面布局简单说明
- 请求列表：显示每个请求的URL、状态码、方法、类型、域名、大小、耗时等,默认按时间排序。
- 瀑布图：右侧的横向时间线,直观展示请求的等待和下载过程。
- 详情面板：点击任意请求，在右侧或底部展开详情，包含请求头、响应头、Cookie、参数、预览和响应体。
- 过滤栏：位于列表上方，可按类型（XHR、JS、CSS、图片、字体等）快速筛选,也支持关键字搜索。
- 工具栏：包括清除、录制开关、导入/导出HAR、设置等。
实操步骤：录制一次会话
- 打开目标网站，按F12或Ctrl+Shift+I进入开发者工具。
- 点击“网络”标签，确保录制按钮为红色（表示正在录制）。
- 刷新页面或执行操作,列表会实时更新。
- 点击任意条目查看详情,或使用搜索框查找特定请求。
- 点击“清除”按钮清空记录，或点击“保存全部为HAR”导出数据。
Firefox网络监控与Chrome对比：谁更适合开发者？
很多开发者会在Chrome和Firefox之间切换，两者都提供强大的网络监控功能，行业共识认为，基础能力上二者难分伯仲，但Firefox在
隐私保护和自定义列上更灵活，而Chrome在性能分析的某些细节上更丰富,下面用表格对比关键差异：
| 功能点 | Firefox | Chrome |
|---|---|---|
| 请求列表自定义 | 支持右键添加/删除列，自由调整 | 列固定，不可编辑 |
| 瀑布图信息 | 鼠标悬停显示详细时间线 | 类似，但Firefox的悬浮信息更丰富 |
| 请求阻止 | 内置“请求拦截”功能 | 需通过控制台或插件 |
| 隐私模式 | 支持在隐私窗口中使用开发者工具 | 支持，但Firefox的隐私保护更彻底 |
| 复制为cURL | 支持 | 支持 |
| 保存HAR | 支持 | 支持 |
| 统计面板 | 提供“网络状态”统计（总请求数、大小、耗时） | 需在Network面板右键查看 |
关键差异点：Firefox允许你自由定制请求列表的列，比如显示“协议”、“缓存状态”等，这对特定场景的调试非常实用，而Chrome的“LightHouse”集成更深,但那是单独的性能审计工具。
什么时候选择Firefox网络监控？
- 当你需要详细分析第三方请求时，Firefox的“请求拦截”功能可以模拟中断特定请求,观察页面降级效果。
- 如果你注重隐私合规，Firefox的DevTools在隐私窗口下不会泄露缓存数据,适合测试登录态。
-
当你需要导出特定格式时，Firefox的HAR导出兼容性更好,且支持复制为Fetch或cURL。
如何用Firefox网络监控分析网页性能
性能分析是网络监控的核心用途之一，打开网络面板后，刷新页面，重点关注瀑布图和底部状态栏的统计信息。
瀑布图解读
瀑布图每一行代表一个请求，从左到右的时间轴展示了请求从开始到完成的各个阶段,常看这几个指标：
- DNS解析：域名解析耗时，如果过长,说明DNS服务器响应慢。
- TCP连接：建立连接的时间,受网络延迟影响。
- TLS握手：安全连接协商时间,HTTPS站点必看。
- TTFB（Time to First Byte）：从发送请求到收到第一个字节的时间，反映后端处理速度，下载：资源传输时间,受文件大小和带宽限制。
使用统计面板
点击网络面板底部的“网络状态”按钮（或右键选择“统计”），会打开一个汇总窗口，这里显示总体请求数、总大小、耗时分布等，你可以快速判断页面是否加载了过多资源,或者是否存在大文件拖慢速度。
定位慢请求
- 按耗时排序：点击列表顶部的“耗时”列，降序排列,最慢的请求排在最前。
- 按大小排序：找出大体积资源,考虑是否可压缩或延迟加载。
- 使用过滤器：只显示XHR请求，查看接口响应时间,判断后端瓶颈。
实用技巧：过滤、搜索与保存
这部分操作能大幅提升工作效率。
按类型过滤
在过滤栏点击“XHR”、“JS”、“CSS”等按钮，快速筛选，也可以组合使用，比如只查看“XHR”和“图片”请求。
文本搜索
在过滤栏右侧的搜索框里输入关键字，会高亮匹配的请求，这与Chrome的搜索功能类似，但Firefox支持搜索请求头、响应体等更多位置。
保存所有请求为HAR文件
点击齿轮图标，选择“保存全部为HAR”，HAR文件是HTTP归档的通用格式，可以用其他工具分析，或者分享给团队成员，操作路径：开发者工具>网络>齿轮>保存全部为HAR。
复制请求为cURL或Fetch
右键点击某个请求，选择“复制”>“以cURL格式复制”，方便在终端重放请求，同样支持复制为Fetch、Node.js等格式,适合自动化测试。
常见问题
Firefox网络监控能抓取HTTPS请求吗？
可以，Firefox内置的开发者工具会自动解密HTTPS流量，无需额外配置，所有请求头、响应体都能正常查看,只要在测试时确认没有证书拦截问题。
为什么有些请求在列表里看不到？
可能原因包括：请求被浏览器缓存（再次访问时没有发出请求）、被过滤栏隐藏、或者页面使用了Service Worker拦截，尝试打开无痕窗口，或者在网络面板中勾选“禁用缓存”选项（在设置菜单里）,然后重新加载。
导出的HAR文件怎么打开？
HAR文件可以用大多数网络分析工具打开，比如Charles、Fiddler，或者直接用文本编辑器查看，Firefox和Chrome也支持导入HAR回放，在Firefox的网络面板中，点击齿轮>导入HAR,即可加载之前的会话数据。
Firefox网络监控是一个轻量但功能完整的抓包与性能分析工具，掌握它之后，你可以在不依赖第三方软件的情况下高效排查前端加载问题。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/518625.html
