websocket-devtools

机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

🚀 安装

Chrome 网上应用店

1. 访问 Chrome 网上应用店
2. 点击 "添加至 Chrome" 并确认安装
3. 打开开发者工具 (F12) → "WebSocket DevTools" 标签页

微软Edge

1. 访问 Microsoft Edge 加载项
2. 点击 "获取" 并确认安装
3. 打开开发者工具 (F12) → "WebSocket DevTools" 标签页

从 GitHub 手动安装

1. 下载最新 GitHub Release中附带的 ZIP 文件
2. 解压 ZIP 文件
3. 打开 chrome://extensions 或 edge://extensions
4. 开启开发者模式，选择加载已解压的扩展程序，然后选中解压后的文件夹

手动安装不会自动更新，请通过 Releases 页面获取新版本。

官网

• 🌐 WebSocket DevTools - 官方网站
• 📺 YouTube视频 - 演示视频

✨ 核心功能

• 🔍 实时监控 - 实时跟踪WebSocket连接和消息更新
• 🔄 后台监控 - 即使关闭DevTools面板也能持续监控连接
• 🎮 消息模拟 - 双向发送自定义消息 (客户端 ↔ 服务器)
• 🚧 流量控制 - 拦截消息并模拟网络问题进行测试
• 💾 收藏系统 - 保存和组织常用消息
• 🌍 多语言支持 - 完整的英文和中文支持
• 🎨 DevTools集成 - 原生Chrome DevTools面板体验
• 🖼️ Iframe支持 - 完整的iframe嵌入式连接WebSocket代理支持

🎬 快速演示

消息拦截

消息模拟

演示的核心功能:

• 消息拦截: 实时拦截和阻止WebSocket消息
• 消息模拟: 发送自定义消息测试不同场景
• 流量控制: 管理WebSocket流量进行调试
• JSON支持: 完整的JSON解析和格式化功能

📷 截图

📖 快速开始

1. 安装扩展 - 添加到Chrome并启用后台监控
2. 打开开发者工具 (F12) → 找到 "WebSocket DevTools" 标签页
3. 查看捕获数据 - 所有WebSocket连接都会在后台自动捕获
4. 检查消息 - 点击连接查看消息历史
5. 模拟消息 - 使用模拟标签页和JSON编辑器
6. 保存收藏 - 为常用消息添加星标以便快速访问

💡 专业提示: 扩展在后台监控WebSocket连接，所以即使你在WebSocket建立后才打开DevTools，也不会错过任何连接！

🔒 隐私和安全

• ✅ 无数据收集 - 所有数据都保存在你的浏览器中
• ✅ 仅本地存储 - 无外部服务器或跟踪
• ✅ 开源代码 - 完全透明且可审计的代码
• ✅ 最小权限 - 仅请求功能所需的权限

🤝 贡献与支持

• 提交 Pull Request 前请先阅读 CONTRIBUTING.md
• Bug 和功能建议请通过 GitHub Issues 提交
• 安全漏洞请按照 SECURITY.md 私下报告

🛠 系统要求

• Chrome 88+ 或基于Chromium的浏览器 (Edge, Brave等)
• WebSocket API - 兼容所有WebSocket实现
• 支持 Socket.IO、ws库 和自定义WebSocket解决方案