Chrome DevTools · SSE / NDJSON

在 DevTools 里看懂 SSE 流

告别流式碎片,自动捕获网页 SSE / NDJSON 流——解析、可视化,一个面板全看清。

F12 → SSE DevTools · /api/stream
LIVE
SSE DevTools Panel 面板总览:Streams 列表、Timeline 与事件详情

为什么需要它

  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. 01
    Events 标签页:按序列出流式事件

    看清每一条事件

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

    • Events
    • Streams
    • NDJSON
  2. 02
    Timeline 标签页:事件间隔与卡顿可视化

    看清推流时序

    Timeline / Stats 标出首包、间隔与卡顿,比只看 Network 整段耗时更直观。

    • Timeline
    • TTFT
  3. 03
    Conversation 标签页:合并后的对话正文

    对话自动拼好

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

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

打开 F12 就能用

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

DeepSeek 网页与 Conversation 合并演示
  • 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 排查异常。

常见问题

安装即用,无需长篇教程。更多细节见 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 获取源码自行构建。离线加载时 Chrome 可能提示「未验证扩展」,属开发者模式正常现象;数据仅本地处理。