火狐浏览器网络监视器可捕获并展示websocket帧级通信内容：启用websocket过滤后，通过“消息”标签页查看收发帧，“响应”标签页检查http升级握手，支持文本/二进制解析及json导出。
如果您在开发 Web 应用时需要实时查看浏览器与服务器之间 WebSocket 连接的收发数据，则火狐浏览器内置的“网络监视器”可直接捕获并展示 WebSocket 帧级通信内容。以下是使用该工具分析 WebSocket 流量的具体操作流程：
一、打开网络监视器并启用 WebSocket 监控
火狐浏览器的网络监视器默认会记录所有网络请求，但需手动切换至 WebSocket 专用视图才能查看帧数据。启动后需确保页面已建立 WebSocket 连接，否则面板中不会显示相关条目。
1、在目标网页处于活动状态时，按下 Ctrl + Shift + E（Windows/Linux）或 Cmd + Option + E（macOS）快捷键，打开网络监视器。
2、点击顶部标签栏中的 “网络”选项卡，确认其处于高亮激活状态。
3、在左侧请求列表上方，找到并点击 “过滤器”输入框右侧的漏斗图标，展开过滤菜单。
4、勾选 “WebSocket”复选框，此时列表仅显示 WebSocket 类型连接条目。
二、定位并展开 WebSocket 连接详情
网络监视器将 WebSocket 连接作为独立请求条目列出，其协议标识为 ws:// 或 wss://。点击该条目后，右侧面板将加载连接生命周期、帧数据及消息内容。
1、在过滤后的请求列表中，查找协议头为 ws:// 或 wss:// 的条目，通常显示为“ws://example.com/socket”或类似路径。
2、单击该条目，在右侧面板中切换至 “消息” 子标签页。
3、若未自动加载消息历史，可尝试刷新页面或手动触发一次 WebSocket 发送操作，促使帧数据填充到面板中。
三、查看并解析 WebSocket 帧内容
“消息”标签页以时间顺序逐条列出所有发送（outgoing）和接收（incoming）的 WebSocket 帧，每条记录包含方向标识、时间戳、载荷类型（文本/二进制）及实际内容。文本帧可直接阅读，二进制帧支持十六进制与 UTF-8 双视图切换。
1、观察每条消息左侧的图标：向上箭头表示发送（outgoing），向下箭头表示接收（incoming）。
2、对文本帧，内容区域直接显示原始字符串；若内容被截断，可点击右侧 “显示全部” 链接展开完整载荷。
3、对二进制帧，点击消息条目右侧的 “查看” 按钮，在弹出窗口中选择 “十六进制” 或 “UTF-8” 视图进行解析。
四、使用“响应”标签页检查握手过程
WebSocket 连接建立依赖 HTTP 升级请求，该握手过程在“响应”标签页中完整呈现，包括请求头中的 Upgrade: websocket 和 Connection: Upgrade 字段，以及服务器返回的 101 Switching Protocols 状态码。
1、保持同一 WebSocket 条目选中状态，在右侧面板中切换至 “响应” 标签页。
2、滚动查看响应头信息，确认存在 HTTP/1.1 101 Switching Protocols 状态行。
3、检查响应头中是否包含 Upgrade: websocket 与 Connection: Upgrade 字段，二者缺一不可。
五、导出 WebSocket 数据用于离线分析
当需对大量帧数据进行外部比对或调试时，可将当前连接的所有消息导出为 JSON 格式文件，保留时间戳、方向、类型及载荷内容，便于后续工具处理。
1、在“消息”标签页右上角，点击 “导出” 按钮（图标为向下箭头加文档）。
2、在弹出的保存对话框中，选择目标位置，文件名自动添加 .json 后缀，点击“保存”。
3、导出文件为标准 JSON 数组结构，每个对象含 type（text/binary）、direction（in/out）、data（Base64 编码的二进制或原始字符串）等字段。
