【开源自荐】SSE DevTools Panel：Chrome DevTools 里调试 SSE / NDJSON 流的专用面板

SSE DevTools Panel

一个开源的 Chrome DevTools 扩展（MIT）。装上后 F12 多一个 SSE DevTools 面板，专门看网页里的 SSE / EventSource / NDJSON / Connect+JSON 流。

• 仓库：https://github.com/FatMii/sse-devtools-panel
• Chrome 应用商店：https://chromewebstore.google.com/detail/sse-devtools-panel/kffpkefnkmabnkhklmnjkihiiclggnni
• 介绍文章：https://juejin.cn/post/7672224177785995298

它解决什么问题

做 AI 对话、通知推送、进度上报时，经常要盯流式接口。打开 Chrome Network，Response 往往是一整屏 data: {...}：想确认某一帧字段就靠滚和 Ctrl+F；思考、正文、工具调用搅在一起更难读。

Chrome 自带的 EventStream 能列出事件，但对联调常常不够：没有像样的 JSON 树，Time 列也只是时间戳，很难看卡顿、重连，更拼不出可读的对话视图。

主要能力：

• 自动捕获 fetch / EventSource / XHR 流式响应，普通 JSON、埋点默认不进侧栏
• Events：事件表 + 可折叠 JSON 树，支持过滤；事件很多时有虚拟滚动
• Timeline：按到达时间看节奏，间隔 ≥250ms 标红；EventSource 重连也可标出
• Request：请求头/体收在一起，常见敏感头会脱敏
• Conversation（附带）：对常见 AI 网页 / OpenAI 兼容流做协议识别，把正文 / 思考 / 工具拆开看
• 另有 Raw、Stats、跨流 Search All，以及 JSON / CSV / .sse 导入导出

不改变页面原有读流方式，只是多一个调试面板。

截图

面板总览：

Events：

Conversation

怎么用

1. 从 Chrome 应用商店 安装
2. 打开目标页 → F12 → SSE DevTools
3. 先刷新页面，再触发流式请求
4. 在侧栏选中流，查看 Events / Timeline / Conversation / Raw

本地源码与 Demo：仓库 README 有说明（pnpm build / pnpm demo）。