Firefox网络监控最直接的方式就是打开自带的网络监视器，按F12进入开发者工具，无需安装任何扩展，就能实时查看页面所有网络请求的耗时、状态码和响应头。
你有没有遇到过这种情况：网页打开特别慢，但不知道卡在哪个环节？Firefox的开发者工具里藏着一个非常强大的网络监控面板，它能告诉你每一个请求的完整故事，今天我们来聊聊怎么用好它。
Firefox网络监控怎么看？开发者工具操作指南
很多用户搜索“firefox网络监控怎么看”，其实答案就在右键菜单里，在任何页面上点击右键，选择“检查元素”，或者直接按F12，就能打开开发者工具，默认显示的是“检查器”面板，你需要点击顶部工具栏的“网络”标签，才会进入网络监视器。
打开网络监视器的三种方式
- 按F12或Ctrl+Shift+I（Mac上为Cmd+Option+I）打开开发者工具，然后点击“网络”标签。
- 在页面任意位置右键,选择“检查元素”，再切到“网络”面板。
- 在Firefox菜单栏中,点击“工具”->“浏览器工具”->“Web开发者工具”，同样可以打开。
界面布局：请求列表、瀑布图与详情面板
打开网络监视器后,你会看到三个主要区域，最上方是工具栏，包含开始/停止录制、清空日志、筛选条件等按钮，中间是请求列表，每一行代表一个资源请求，显示方法、文件、状态、传输大小、耗时等，右侧是瀑布图，直观展示每个请求的加载时间线，当你点击任意一行，下方会展开详情面板，提供“消息头”、“Cookie”、“响应”、“时间”等子标签页。
这块区域就是你的网络监控中心,初次使用可能觉得信息多，但别怕，我们接下来用实际场景来拆解。
用Firefox网络监控排查页面加载慢的实战步骤
假设你维护一个网站,用户反馈首页加载很慢，这时候用Firefox网络监视器，可以按以下步骤定位问题。
清空历史日志并重新录制
打开网络面板后,先点击工具栏上的清空按钮（垃圾桶图标），确保后续记录都是本次刷新的，然后按F5刷新页面，网络监视器会从零开始记录所有请求。
按耗时排序，找出慢请求
请求列表顶部各列是可点击排序的,点击“耗时”列，列表会按加载时长从高到低排列，通常耗时最高的几个请求就是罪魁祸首，如果某个请求的状态码是红色，或者耗时超过1秒，你需要重点关注。
用瀑布图观察并行与阻塞
点击一个请求,右侧瀑布图会显示这个请求的详细阶段：DNS查询、连接、发送、等待、接收，等待”时间特别长，说明服务器响应慢；连接”时间高，可能是网络延迟或SSL握手问题，行业共识认为，页面加载慢的常见瓶颈并非服务器带宽，而是请求阻塞和资源体积过大。
筛选特定类型的资源
工具栏上有“HTML”、“CSS”、“JS”、“图片”、“字体”等筛选按钮，你可以只查看JS脚本加载，看看是否有某个第三方统计脚本拖慢了整个页面，也可以点击“筛选”下拉框，选择“大于”，输入数值，1000”，只显示耗时超过1秒的请求。
复制为cURL，在终端中重复请求
在请求上右键,选择“复制值”->“复制为cURL”，然后在终端里执行这个命令，可以模拟浏览器发出的请求，进一步排查是服务器问题还是网络问题，这个操作非常实用，尤其适合需要和后端联调的场景。
通过这五步,你基本能定位到绝大多数页面性能问题。
一个请求的完整生命线：Firefox网络监控中的阶段解读
在瀑布图中,每个请求的条形图会被分成不同颜色的小段，理解这些颜色代表什么，是读懂网络监控的关键。
- DNS查询：浏览器把域名解析为IP地址的时间，如果这个值很大，通常意味着DNS服务器响应慢，或者本机DNS缓存失效。
- 连接：TCP握手时间，HTTPS请求还会包含TLS握手，这部分时间通常和网络延迟、服务器配置有关。
- 发送：请求数据上传到服务器的时间，通常很短，但如果上传大文件，比如图片或视频，这个值会明显增加。
- 等待：从请求发出到收到第一个字节的时间，也叫TTFB，这是最关键的指标，它直接反映服务器的处理能力，如果你看到等待时间占了整个条形图的大部分，问题大概率出在服务端。
- 接收：浏览器下载响应内容的时间，如果接收时间很长，可能是因为资源太大，或者网络带宽不足。
你可以把鼠标悬停在瀑布图的某个色块上,Firefox会显示这个阶段的具体耗时，这种可视化的方式，比单纯看数字更直观。
Firefox网络监控的进阶功能：筛选、搜索与导出HAR
除了基础查看,Firefox网络监视器还提供了一些被低估的功能。
按关键词搜索请求
在请求列表上方的搜索框输入关键词,可以实时过滤出包含该关键词的URL，比如输入“api”，就能看到所有接口请求，这个功能在调试前后端接口时非常高效。
自定义请求列
右键点击请求列表的标题栏,可以勾选显示“IP地址”、“协议”、“优先级”等字段，如果你需要查看某个请求是从哪个服务器IP返回的，勾选“IP地址”即可。
编辑和重发请求
点击一个请求,在详情面板里找到“重新发送”按钮，或者右键选择“编辑并重新发送”，Firefox会打开一个表单，允许你修改请求方法、URL、消息头、请求体，然后再次发送，这相当于一个轻量级的接口调试工具，不需要额外安装POSTMAN之类的工具。
导出HAR文件
如果你需要把网络监控记录分享给同事或用于文档存档,点击工具栏的“齿轮”图标，选择“保存全部为HAR”，HAR文件是JSON格式，Chrome、抓包工具等都能识别，收到文件的人用任意文本编辑器打开，或者拖回Firefox网络监视器，就能看到完整的请求列表。
拦截请求以模拟故障
在请求列表上右键,选择“阻止URL”，之后浏览器会直接拦截该资源，模拟它加载失败的情况，你可以利用这个功能测试页面在缺失某个脚本或样式时是否还能正常显示，对于前端开发来说，这是非常实用的容错测试手段。
Firefox网络监控插件有必要装吗？内置工具与扩展的取舍
很多用户会搜索“firefox网络监控插件”，担心内置功能不够用，对于绝大多数场景，内置网络监视器已经足够，但如果你需要更专业的流量分析，可以考虑一些扩展。
内置工具的优势
- 性能开销低：作为浏览器原生功能，它不会额外占用太多内存。
- 与开发者工具联动：可以在控制台、调试器之间切换，方便排查上下文。
- 支持HAR导出：满足基本的数据交换需求。
什么时候需要插件？
- 需要监控系统级网络流量（比如所有进程的HTTP请求），内置工具做不到，这时可以考虑使用Fiddler或mitmproxy等独立抓包工具。
- 需要查看WebSocket的详细帧数据,虽然Firefox内置也支持，但专门扩展的界面可能更友好。
- 需要修改请求头并自动化重放,内置的“编辑重发”功能略显笨拙，此时可以借助Tamper Data等扩展。
业内专家指出,过度依赖插件反而容易让浏览器变臃肿，先掌握内置工具，再按需扩展，是更理性的选择。
Firefox网络监控与Chrome DevTools对比，哪个更顺手？
这是很多人纠结的问题,两个浏览器都提供了强大的网络监控功能，但侧重点略有不同。
| 对比项 | Firefox网络监视器 | Chrome DevTools网络面板 |
|---|---|---|
| 打开方式 | F12 | F12 |
| 瀑布图 | 时间线颜色区分清晰，支持阶段展开 | 可视区域更大，悬浮提示更详细 |
| 请求重发 | 支持编辑并重发，表单直观 | 支持Replay XHR，但仅限XHR |
| 筛选能力 | 类型筛选+关键词+耗时筛选 | 类似，但正则支持更友好 |
| HAR导出 | 支持 | 支持 |
| 内存占用 | 相对轻量 | 稍微重一点 |
从表格可以看出,两者功能高度重合，多数用户反馈，Firefox的“编辑并重发”比Chrome的“Replay XHR”更直观，因为你能直接修改所有字段，而Chrome的瀑布图在分析长列表时更舒服，如果你已经习惯Chrome，没必要切换；但如果你注重内存占用，或者喜欢Firefox的体验，内置网络监视器完全够用。
常见问题：Firefox网络监控相关
为什么网络监视器里看不到某些请求？
如果你开启了HTTPS,浏览器默认会解密并显示所有页面发起的请求，但如果你安装了拦截广告的扩展，或者请求被浏览器扩展阻止了，它们就不会出现在列表里，Service Worker控制的请求可能需要在设置中开启“显示Service Worker请求”。
如何监控WebSocket连接？
在网络监视器中,点击“类型”筛选，选择“WebSocket”，或者直接在搜索框输入“ws://”，点击一个WebSocket连接，右侧详情面板会新增“消息”标签页，里面可以看到发送和接收的帧数据，这个功能对调试实时应用很有用。
Firefox网络监视器能监控其他软件的网络请求吗？
不能,它只能监控当前浏览器标签页内发起的网络请求，如果你想监控系统里其他进程的HTTP流量，需要借助Fiddler、mitmproxy或Wireshark等独立网络监控工具，浏览器内置的网络监控是“前端调试”工具，不是“系统抓包”工具。
Firefox网络监控的核心就是内置的网络监视器，掌握它的筛选、排序、重发和HAR导出功能，你就能高效诊断网页性能问题，完全不需要额外安装插件。 遇到网络请求相关的问题，先按F12，再决定下一步。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/561163.html
