检查 WebSockets

从 Firefox 71 开始，网络监视器 具有检查 WebSocket 连接的功能。本文探讨了 WebSocket 检查器提供的功能。

访问检查器

当您检查使用 WebSocket 连接的 Web 应用程序时，WebSocket 请求将与所有其他请求一起列在网络监视器的请求列表中。

WS filter in the network inspector

您可以使用 WS 按钮过滤列表以仅显示 WebSocket 连接。只有状态代码为 101 (WebSocket 协议握手) 的请求可见，这表示服务器已切换到 WebSocket 连接。

单击 WebSocket 请求将打开通常的侧边栏以显示其他详细信息。选择“**响应**”选项卡以检查通过所选连接发送和接收的 WebSocket 帧。

Messages panel in the web socket inspector

实时更新的表格显示发送 (绿色箭头) 和接收 (红色箭头) 帧的数据。每个帧都可以在单击时展开，以便您可以检查格式化后的数据。

暂停 WebSocket 流量

您可以使用网络监视器工具栏中的暂停/恢复按钮停止拦截 WebSocket 流量。这允许您仅捕获您感兴趣的帧。

Pausing the web socket inspector

过滤 WebSocket 帧

要关注特定消息，可以使用“响应”面板顶部的过滤器过滤帧。

web socket frame filter

在“响应”窗格的工具栏中，还提供了预定义的过滤器，这些过滤器被分组到一个选择列表中。

Screenshot showing the filter menu for WebSocket messages

以下过滤器可用

全部

显示所有消息（默认情况下，除了控制消息）。

发送

仅显示浏览器发送的消息（默认情况下，除了控制消息）。

接收

仅显示从服务器接收的消息（默认情况下，除了控制消息）。

控制

（从 Firefox 76 开始可用）。显示控制帧（Ping、Pong 或 Close）的消息。此过滤器可以与其他过滤器结合使用，例如，仅显示浏览器发送的控制帧的消息。

“响应”窗格中的列

在“**响应**”窗格中，您可以选择显示有关每个帧的以下信息

  • 数据

  • 大小

  • 时间

  • OpCode

  • MaskBit

  • FinBit

“数据”和“时间”列默认可见，但您可以自定义界面以查看更多列，方法是从通过右键单击表标题打开的上下文菜单中选择要显示的列。

columns in the messages panel

展开每条消息

在列表中选择一条消息将在“响应”窗格底部显示该消息中发送的数据的预览。

web socket payload preview

支持的 WS 协议

检查器目前支持以下 WebSocket 协议

  • 纯 JSON

  • Socket.IO

  • SockJS

  • SignalR

  • WAMP

  • STOMP

  • SockJS 中的 STOMP

基于这些协议的有效负载将被解析并显示为可展开的树，以便于检查，当然您仍然可以查看原始数据（按网络发送）。

网络监视器功能

以下文章介绍了使用网络监视器的不同方面