ruanyf-weekly:11112 · 2026 年收录
【开源自荐】SSE DevTools Panel：Chrome DevTools 里调试 SSE / NDJSON 流的专用面板
SSE DevTools Panel 一个开源的 Chrome DevTools 扩展（MIT）。装上后 F12 多一个 SSE DevTools 面板，专门看网页里的 SSE / EventSource / NDJSON / Connec
被谁收录过
投稿原文（节选）
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 怎么用 从 Chrome 应用商店 安装 打开目标页 → F12 → SSE DevTools 先刷新页面 ，再触发流式请求 在侧栏选中流，查看 Events / Timeline / Conversation / Raw 本地源码与 Demo：仓库 README 有说明（ pnpm build / pnpm demo ）。