WebSocket 为聊天应用、实时仪表板、GraphQL 订阅、多人游戏和协作编辑器提供支持——但调试它们很痛苦。Chrome DevTools 显示 WebSocket 帧，但其 UI 很笨拙，过滤功能有限。WebSocket 检查器为您提供了更干净的专用视图。该工具在页面上下文中围绕本地 WebSocket 构造函数安装包装器，因此每个新 WebSocket() 都被截获。每个连接都显示在列表中，显示其 URL、状态（连接中 → 打开 → 关闭）、持续时间和断开连接时的关闭代码。每帧——发送和接收——都被捕获，带有时间戳、方向、大小、二进制标志和预览。单击任何帧以查看其完整有效负载，如果是 JSON，自动格式化。按方向（发送/接收）、仅二进制或特定连接过滤。因为包装器在工具激活时安装，您可能想重新加载页面以捕获现有连接——新连接从您打开工具的时刻起被捕获。
显示每个 WebSocket 的状态（连接中/打开/关闭）、URL、持续时间、关闭代码和任何关闭原因。
发送（→）和接收（←）帧都显示时间戳、大小、二进制标志和内联预览。
单击一帧以查看完整有效负载。JSON 字符串自动使用 2 空格缩进进行格式化以便可读检查。
将帧过滤为仅发送、仅接收或仅二进制——专注于您正在调试的内容。
单击连接以仅过滤该连接的帧——当多个 WebSocket 处于活动状态时很有用（例如聊天+在线状态）。
工具激活后打开的任何 WebSocket 都会立即被捕获。仅重新加载以捕获预先存在的连接。
准确看到客户端和服务器之间发送和接收的消息——指出传递失败的位置。
检查订阅操作和传入数据推送以调试不匹配的有效负载或订阅拆卸错误。
通过观察第三方实时 API 的消息结构和时序来理解其工作原理。
验证保活帧以预期的间隔被发送——错过的 ping 可以解释意外的断开连接。
监看关闭事件（带代码和原因）和后续的新连接尝试以调试重试/重新连接错误。
单击 DevSuite Pro 停靠栏中的 WebSocket 图标。工具激活，面板打开显示连接和帧。
在工具激活之前打开的 WebSocket 将不会被捕获。重新加载以重新创建它们并从一开始就截获。
当页面打开 WebSocket 时，它们显示在连接列表中，带有实时状态更新。
每一帧都实时记录。按方向过滤或单击连接以缩小列表。
单击任何帧以查看其完整有效负载（如果适用，格式化的 JSON）以及时间戳、大小和二进制标志。
