StreamPanel：一个让 SSE 调试不再痛苦的 Chrome 插件

当 Chrome 开发者工具的 Network 面板无法满足你的 SSE 调试需求时，我们选择自己动手做一个。

故事的开始

在开发 AI 应用平台的过程中，我们经常需要调试 Server-Sent Events (SSE) 连接。Chrome 开发者工具虽然强大，但在查看 SSE 报文方面确实有些力不从心：

Network 面板中的 EventStream 查看体验不够友好
无法方便地查看 iframe 中的 SSE 连接
缺少针对流式数据的筛选和搜索功能

StreamPanel 是什么

StreamPanel 是一个 Chrome DevTools 扩展，专门用于监控和调试流式请求。它能够：

🔍 实时监控：拦截并显示所有 EventSource 和基于 Fetch 的 SSE 连接
📊 消息检查：查看详细的消息数据，支持 JSON 语法高亮
🔗 连接管理：同时跟踪多个流式连接，包括主页面和 iframe
🎯 URL 过滤：按 URL 过滤连接，快速定位目标端点
🔎 消息筛选：根据 JSON 字段值进行筛选（支持全等和包含两种模式）
🌓 深色模式：自动适配系统主题

安装方法

1. 获取源码

首先，你需要获取 StreamPanel 的源码。可以通过以下方式：

bash 复制代码

# 克隆仓库
git clone https://github.com/bywwcnll/StreamPanel.git
cd StreamPanel

或者直接下载 ZIP 文件并解压。

2. 加载到 Chrome

打开 Chrome 浏览器，访问 chrome://extensions/
在右上角开启开发者模式（Developer mode）
点击加载已解压的扩展程序（Load unpacked）
选择 StreamPanel 项目目录
完成！插件已安装

3. 验证安装

安装成功后，你应该能在扩展程序列表中看到 StreamPanel。打开任意网页的开发者工具（F12），应该能看到一个新的 Stream Panel 标签页。

使用方法

基本使用

打开开发者工具
- 按 F12 或右键选择"检查"
- 切换到 Stream Panel 标签页
查看连接
- 左侧面板会显示所有检测到的流式连接
- 每个连接显示 URL、状态、消息数量等信息
- 连接按创建时间倒序排列，最新的在最上面
查看消息
- 点击左侧的连接，右侧会显示该连接的所有消息
- 消息以表格形式展示：ID、类型、数据、时间
- 点击任意消息可查看详细的 JSON 内容

高级功能

URL 过滤

在顶部工具栏的输入框中输入 URL 关键词，可以快速过滤连接列表。

消息筛选

这是 StreamPanel 的核心功能之一，特别适合处理大量消息的场景：

点击右上角的筛选按钮，显示筛选面板
点击添加筛选条件
配置筛选条件：
- 字段：从下拉列表中选择要筛选的 JSON 字段（自动提取所有可用字段）
- 匹配模式：选择"全等"或"包含"
- 筛选值：输入要匹配的值
可以添加多个筛选条件，使用 AND 逻辑
点击应用筛选按钮生效

示例场景：

假设你的 SSE 消息格式如下：

json 复制代码

{
  "event": "message",
  "conversation_id": "c8f8a2ec-d046-4fcb-84d4-55b42308f68d",
  "message_id": "fe50c43f-e4b7-4f9d-be73-87cf20ca738f",
  "answer": "饮酒"
}

你可以：

筛选 event 字段等于 "message" 的消息
筛选 conversation_id 包含 "c8f8" 的消息
同时应用多个条件，比如：event 等于 "message" 且 answer 包含 "酒"

支持嵌套字段

StreamPanel 支持使用点号表示法访问嵌套的 JSON 字段，例如：user.profile.name

技术实现

StreamPanel 的核心是拦截浏览器的 EventSource 和 Fetch API，实现原理如下：

scss 复制代码

网页
  └── inject.js (拦截 EventSource/fetch)
      └── content.js (消息桥梁)
          └── background.js (数据存储)
              └── devtools/panel (UI 显示)

关键组件

inject.js ：注入到网页中，拦截 EventSource 构造函数和 fetch API
content.js：作为注入脚本和后台脚本之间的消息桥梁
background.js：管理数据存储，处理标签页间的通信
devtools/panel：在 Chrome DevTools 中显示的 UI 面板

筛选功能实现

消息筛选功能的核心是：

递归提取 JSON 数据中的所有字段（包括嵌套字段）
支持点号表示法访问嵌套属性
使用防抖优化，避免频繁重渲染
分离"待应用"和"已应用"的筛选条件，提供更好的交互体验

使用场景

StreamPanel 特别适合以下场景：

AI 应用开发：调试 LLM 流式响应
实时数据监控：查看 WebSocket/SSE 推送的数据
API 调试：分析流式接口的返回内容
多 iframe 场景：同时监控主页面和 iframe 中的连接

总结

StreamPanel 的诞生源于实际开发中的痛点。通过 AI 辅助开发，我们快速实现了一个功能完善的 Chrome 插件，不仅解决了自己的问题，也希望能帮助到更多开发者。

如果你也在为 SSE 调试而烦恼，不妨试试 StreamPanel。项目已开源，欢迎使用和贡献！

项目地址 ：GitHub Repository

问题反馈：欢迎提交 Issue 或 Pull Request