以图形方式显示传入和传出的 WebSocket 消息以及事件类型分组
🔌 WebSocket Visualizer — 适用于 Chrome DevTools 的 WebSocket 连接可视化工具
WebSocket Visualizer 是一个功能强大的开发人员扩展，它向 Chrome DevTools 添加了一个新选项卡，实时显示通过页面传递的所有 WebSocket 消息。该扩展有助于分析、过滤和理解客户端和服务器之间通过 WebSocket 协议进行的交互，而无需更改应用程序代码或使用第三方库。
🌐主要思想
现代应用程序积极使用 WebSocket 连接进行实时数据交换——聊天、交换、游戏、金融面板、物联网设备和其他系统。
然而，标准浏览器工具没有提供观察这些数据流的便捷方法。 WebSocket Visualizer 解决了这个问题：它将自身注入到页面上下文中并拦截本机 WebSocket 事件（打开、消息、关闭、错误、发送），在单独的 DevTools 选项卡中以美观、结构化和交互方式可视化所有内容。
⚙️ 主要特点
📡 拦截所有连接
该扩展自动替换原生的 WebSocket 构造函数，跟踪页面或库（包括 Socket.io、ws、Primus 等）打开的所有连接
💬 消息显示
每条传入和传出的消息都显示为包含详细信息的卡片：
事件时间（以毫秒为单位）
方向（⬇️传入/⬆️传出）
事件类型（类型、事件、操作、cmd — 自动检测）
JSON格式的消息内容
连接 URL 和 WebSocket 会话 ID
🧠 智能分组
消息按事件类型（例如消息、更新、交易、心跳）进行分组 - 让您能够快速分析协议结构和特定事件的频率。
📈 实时统计
顶部面板显示摘要：
活跃连接数
消息总数
发送和接收
所有计数器实时更新，无需重新加载
🔍 灵活的过滤
按事件类型或关键字快速搜索
方向开关：“全部/传入/传出”
单击侧栏中的事件类型即可立即应用过滤器
⏸️ 暂停和恢复
您可以暂停事件流进行分析并稍后恢复，而不会丢失上下文，这对于大流量或历史分析非常有用。
🗑️清除并重置
一键清除所有消息和统计数据，保留活动连接和过滤器。
🌍 多语言
支持的界面语言：
英语🇬🇧
俄语🇷🇺
乌克兰语🇺🇦
德语🇩🇪
西班牙语🇪🇸
语言选择将被保存并在下次启动时自动应用。
🎨 现代设计
该界面的灵感来自 Visual Studio Code：
深色主题
柔和的渐变和活动元素的突出显示
流畅的消息动画
风格化的滚动条和简洁的排版
🧭 使用说明
打开开发工具（F12 或 Ctrl + Shift + I）。
转到WebSocket选项卡——这是扩展界面。
加载或刷新启用 WebSocket 连接的页面。
扩展程序将自动拦截并显示所有事件：
🔗 连接 — 连接已创建
✅ 打开 — 连接已打开
⬇️ 传入 — 传入消息
⬆️ 传出 — 传出消息
❌ close — 连接关闭
⚠️ error — 错误或失败
使用过滤器来关注您需要的事件。
您可以使用 ⏸️ 暂停按钮暂停流，检查数据，然后使用 ▶️ 恢复继续。
要清除数据，请单击 🗑️ 清除 — 界面将刷新并开始等待新连接。
所有操作都会立即反映在 UI 中：动画、计数器和过滤器实时同步。
用例示例
🔍 调试实时聊天和消息程序
💸 加密货币交易所WebSocket API分析
🕹️ 监控游戏服务器和网络交互
💬 测试推送通知和流媒体服务
🧩 WS 上的非标准协议分析
📊 有关使用实时数据的教育项目
🔧附加功能
自动 JSON 格式化并突出显示结构
自动滚动到最后一条消息
用于性能优化的历史记录限制（每个列表最多 1000 条消息）
安全和隐私
该扩展程序不会从网站收集、保存或发送数据。
所有操作都在浏览器上下文中本地执行。
最小权限（activeTab、脚本、存储）专门用于 DevTools 中的数据可视化。
没有外部请求、跟踪器或第三方 API。
🆕 1.3.0 中的新功能
新版本的 WebSocket Visualizer 1.3.0 增加了对德语和西班牙语的支持，并且界面语言切换器已更新以包含新的本地化选项。连接活动监控和状态管理已得到改进，并且实现了 JSON 查看器以详细查看消息数据。该界面已获得视觉改进和新的统计元素：您现在可以实时监控发送和接收的字节数。
此外，消息导出功能已扩展为包括 JSON、CSV 和 HAR 格式，并添加了用于复制单个消息的按钮。所有与导出和统计相关的文本现已本地化为所有支持的语言。这些更新使 WebSocket Visualizer 可以更方便地直接在浏览器中分析流量、测试和调试 WebSocket 连接。
🆕 1.4.0 中的新功能
WebSocket Visualizer 现在支持通过集成的十六进制查看器进行二进制数据处理，以便更深入地检查原始消息内容。改进了消息解析逻辑，以确保更准确地解码复杂的 WebSocket 帧。此外，此更新还为所有新的二进制数据功能引入了本地化翻译，为多种语言的用户提供了更流畅的体验。
