# websocket-devtools

**Repository Path**: browser_plugins/websocket-devtools

## Basic Information

- **Project Name**: websocket-devtools
- **Description**: 专业 WebSocket 调试插件
代理、模拟、阻断消息，具备高级调试功能。为开发者提供实时监控和流量控制 - WebSocket DevTools
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-07
- **Last Updated**: 2025-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
<img src="./ScreenShot/ScreenShot-long-quick-radius.png" alt="主界面" width="88%" style="border-radius: 8px;">
</div>

<div align="center">

<!-- <img src="./ScreenShot/Promo_Tile-1.png" alt="WebSocket DevTools" width="30%"> -->

## WebSocket DevTools

专业的WebSocket调试工具，提供实时监控、消息模拟和流量拦截功能


[![][version-shield]][version-link]
[![][license-shield]][license-link]
[![][privacy-shield]][privacy-link]
[![][homepage-shield]][homepage-link]
[![][chrome-shield]][chrome-link]
[![][stars-shield]][stars-link]
[![][deepwiki-shield]][deepwiki-link]
[![][youtube-shield]][youtube-link]


[English](./README.md) | **简体中文**

</div>



## 🚀 安装

### Chrome 网上应用店
1. 访问 [Chrome 网上应用店](https://chromewebstore.google.com/detail/websocket-devtools/fmnaobbfmjaaaebelkacpmmmpaaefbod)
2. 点击 **"添加至 Chrome"** 并确认安装
3. 打开开发者工具 (F12) → **"WebSocket DevTools"** 标签页

### 官网

- 🌐 [WebSocket DevTools](https://websocket-devtools.com) - 官方网站
- 📺 [YouTube视频](https://www.youtube.com/watch?v=L64x__1xORQ) - 演示视频

## ✨ 核心功能

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

## 🎬 快速演示

### 消息拦截

<img src="./ScreenShot/Gif/2-block-x.gif" alt="消息监控" width="65%" style="border-radius: 8px;">

### 消息模拟
<img src="./ScreenShot/Gif/5-Best_Practice.gif" alt="消息监控" width="65%" style="border-radius: 8px;">

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

## 📷 截图

<div align="center">


### 消息详情和JSON查看器
<img src="./ScreenShot/ScreenShot-2.png" alt="消息监控" width="65%" style="border-radius: 8px;">

### 消息模拟和流量控制
<img src="./ScreenShot/ScreenShot-3.png" alt="模拟功能" width="65%" style="border-radius: 8px;">

### 收藏系统
<img src="./ScreenShot/ScreenShot-4.png" alt="附加功能" width="65%" style="border-radius: 8px;">

</div>



## 📖 快速开始

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

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

## 🔒 隐私和安全

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

## 🛠 系统要求

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

---

<img src="./ScreenShot/ScreenShot-long.png" alt="主界面" width="100%" style="border-radius: 8px;">

---

<div align="center">

**MIT许可证** • [⭐ GitHub](https://github.com/law-chain-hot/websocket-devtools) • [📖 Wiki](https://github.com/law-chain-hot/websocket-devtools/wiki) • [📚 DeepWiki](https://deepwiki.com/law-chain-hot/websocket-devtools) • [🛒 Chrome商店](https://chromewebstore.google.com/detail/websocket-devtools/fmnaobbfmjaaaebelkacpmmmpaaefbod) • [📺 YouTube](https://www.youtube.com/watch?v=L64x__1xORQ)

</div> 

[version-shield]: https://img.shields.io/badge/version-1.0.3-55b467?labelColor=black&logo=github&style=flat-square
[license-shield]: https://img.shields.io/badge/license-MIT-369eff?labelColor=black&logo=opensourceinitiative&style=flat-square
[chrome-shield]: https://img.shields.io/badge/Chrome%20Web%20Store-Install-ffcb47?labelColor=black&logo=googlechrome&logoColor=white&style=flat-square
[privacy-shield]: https://img.shields.io/badge/privacy-local%20only-c4f042?labelColor=black&logo=shield-check&style=flat-square
[homepage-shield]: https://img.shields.io/badge/Homepage-WebSocket%20DevTools-blue?labelColor=black&logo=globe&style=flat-square
[websocket-shield]: https://img.shields.io/badge/WebSocket-DevTools-ff80eb?labelColor=black&logo=websocket&style=flat-square
[devtools-shield]: https://img.shields.io/badge/DevTools-Panel-8ae8ff?labelColor=black&logo=googlechrome&style=flat-square
[deepwiki-shield]: https://img.shields.io/badge/DeepWiki-Docs-orange?labelColor=black&logo=book&style=flat-square
[stars-shield]: https://img.shields.io/github/stars/law-chain-hot/websocket-devtools?color=ffcb47&labelColor=black&style=flat-square 
[version-link]: https://github.com/law-chain-hot/websocket-devtools/releases
[license-link]: ./LICENSE
[chrome-link]: https://chromewebstore.google.com/detail/websocket-devtools/fmnaobbfmjaaaebelkacpmmmpaaefbod
[privacy-link]: ./PRIVACY.md
[homepage-link]: https://websocket-devtools.com
[websocket-link]: https://github.com/law-chain-hot/websocket-devtools
[devtools-link]: https://chromewebstore.google.com/detail/websocket-devtools/fmnaobbfmjaaaebelkacpmmmpaaefbod
[deepwiki-link]: https://deepwiki.com/law-chain-hot/websocket-devtools
[stars-link]: https://github.com/law-chain-hot/websocket-devtools/stargazers 
[youtube-shield]: https://img.shields.io/badge/YouTube-Video-red?labelColor=black&logo=youtube&style=flat-square
[youtube-link]: https://www.youtube.com/watch?v=L64x__1xORQ