law-chain-hot/websocket-devtools

这是什么？

核心功能

• 01在后台持续捕获 WebSocket 连接，打开 DevTools 面板前已建立的连接也能查看。
• 02支持在客户端与服务端之间双向发送自定义消息。
• 03可拦截指定消息，并模拟网络异常以便测试。
• 04提供 JSON 查看器，用于格式化和检查消息内容。
• 05可将常用消息保存为收藏。
• 06支持代理 iframe 中的 WebSocket 连接。

适用场景

• 在浏览器中调试实时聊天或多人游戏的消息通信。
• 测试前端对丢失或格式错误的 WebSocket 消息的处理。
• 无需真实后端，通过注入或重放消息复现问题。

快速上手

1. 1

   从 Chrome 应用商店安装

2. 2

   或从 Microsoft Edge 加载项商店安装

3. 3

   按 F12 打开 DevTools，选择 WebSocket DevTools 标签页

使用前须知

• !从 GitHub 手动安装的版本不会自动更新。
• !仅支持 Chrome 和 Edge 浏览器。

标签

常见问题

websocket-devtools 是什么？

一款用于在浏览器中监控、模拟和拦截 WebSocket 流量的 Chrome/Edge DevTools 扩展。 WebSocket DevTools 是一款浏览器扩展，为 Chrome 和 Edge 的开发者工具添加 WebSocket 面板。它会捕获 WebSocket 连接及其消息记录，即使在面板打开前已建立的连接也能被监控，方便开发者查看页面中的实时通信。

websocket-devtools 可以免费使用吗？用的什么许可证？

websocket-devtools 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

websocket-devtools 还在维护吗？

活跃维护中。websocket-devtools 最近一次提交是在 2026年9月28日。

websocket-devtools 适合用来做什么？

在浏览器中调试实时聊天或多人游戏的消息通信。 测试前端对丢失或格式错误的 WebSocket 消息的处理。 无需真实后端，通过注入或重放消息复现问题。

websocket-devtools 怎么安装和运行？

从 Chrome 应用商店安装 或从 Microsoft Edge 加载项商店安装 按 F12 打开 DevTools，选择 WebSocket DevTools 标签页

在哪里获取 websocket-devtools？

源代码和安装说明在 GitHub 上：https://github.com/law-chain-hot/websocket-devtools