持续维护中

在 DevTools 里看懂 SSE 流

自动捕获网页 SSE / NDJSON,按事件解析与可视化,一个面板看清整条流。

  • MIT 开源
  • 本地 处理,不上云
  • MV3 扩展
  • 更新动态
F12 → SSE DevTools · /api/stream
LIVE

为什么需要它

  1. 01 Network 覆盖不到这类流

    EventStream Tab 面向标准 SSE。很多 AI 流走 fetch + NDJSON / Connect+JSON,Network 多半只能看整段 Response,缺少按事件拆开的视图。

  2. 02 只有整段耗时

    首包延迟、chunk 间隔、卡顿和重连,都藏在「整请求耗时」里,Network 不会单独标出来。

  3. 03 对话散落在原始帧里

    思考、正文、工具调用混在 raw 数据中,要自己对照才能读完一轮回复;Conversation 会按通道自动合并。

专为流式调试设计

装完即用,在 DevTools 里看清 SSE / NDJSON 的每一步。

  1. Events 标签页:按序列出流式事件
    01

    看清每一条事件

    fetch / EventSource / XHR 自动捕获,按流分组。

    • Events
    • Streams
    • NDJSON
  2. 时序标签页:到达密度、等待轨与卡顿浮标
    02

    看清推流时序

    时序展示到达密度、等待(ms)、阶段色带、卡顿浮标与按事件类型分行,比只看 Network 整段耗时更直观。

    • 时序
    • TTFT
    • 缩放
  3. Conversation 标签页:合并后的对话正文
    03

    对话自动拼好

    思考、正文、工具调用分通道展示,告别 raw NDJSON。

    • Conversation
    • AI Web
SSE DevTools 主界面工作台
  • DevTools
  • MV3

打开 F12 就能用

无需代理或改代码,装完在 DevTools 面板里直接调试 SSE / NDJSON 流。

  • Conversation
  • DeepSeek
  • AI Web

真实站点对话也能拼好

DeepSeek 等 AI 网页推流时,思考 / 正文 / 搜索会按通道合并,不必对着 raw 帧硬读。

  • Virtual scroll
  • Events
  • Raw

长流也能顺畅滚动

Events / 对话 / Raw 使用虚拟滚动:事件再多也只渲染可见区域,长连接调试不卡顿。

SSE DevTools 暗夜主题界面
  • Night
  • Theme

暗夜主题护眼

工具栏切换浅色 / 暗夜 / 跟随 DevTools,偏好保存在 Chrome 同步,夜间调试更舒服。

Request 标签页:请求头与基础信息
  • Request
  • Headers

请求上下文一眼清

Request 查看方法、状态、Content-Type 与头信息,敏感字段自动脱敏,对照流内容更方便。

Stats 对话框:流式性能指标
  • Stats
  • Anomalies

Stats 看清流健康度

首包延迟、总时长、平均 / 最大间隔、每秒事件数一屏汇总;也可配合 Anomalies / Spec 排查异常。

活跃维护
v1.3.0

时序面板重做

Timeline 更名为 Timing / 时序:双轨到达与等待、缩放、阶段色带、卡顿浮标与按事件类型分行。

  1. v1.2.6
    新手引导 首次打开会走一遍主要界面。之后可在 More 里重看,或加载内置样例流。
  2. v1.2.5
    流列表显示起止时间 侧栏每条流都会显示开始和结束时间。
  3. v1.2.4
    请求体支持折叠 Request 里长内容默认收起,需要时再展开或复制。捕获上限约 8MB。
  4. v1.2.0
    暗夜主题 工具栏可切换浅色 / 暗夜,也可跟随 DevTools。

常见问题

安装即用,无需长篇教程。更多细节见 GitHub README。

支持哪些浏览器?

面向 Chromium 系浏览器(Chrome、Edge 等),需支持 Manifest V3 与 DevTools 扩展。安装后打开 F12,在顶部标签栏找到 SSE DevTools。

离线包怎么装?

下载 离线 zip → 解压 → 打开 chrome://extensions → 开启开发者模式 → 加载已解压的 dist/ 文件夹。

数据会上传吗?

不会。扩展在本地解析与展示流式数据,不上传云端。离线加载时 Chrome 可能提示「未验证扩展」,属开发者模式正常现象。

和 Network 面板有什么区别?

Network 看整段请求;SSE DevTools 专为流式设计——按事件解析、对话合并、时序节奏与 TTFT,适合 AI 对话与 NDJSON 私有协议。

更多功能说明与截图: GitHub README

获取扩展

选一种方式即可。国内网络推荐离线包。

开发者也可从 GitHub Releases 获取源码自行构建。离线加载时浏览器可能提示「未验证扩展」,属开发者模式正常现象;数据仅本地处理。