跪拜 Guibai
← All articles
Frontend · Backend · Artificial Intelligence

SSE DevTools Panel Replaces Chrome's Native EventStream with a Purpose-Built Streaming Debugger

By 秋天的一阵风 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Chrome's built-in EventStream tab is a flat table with no JSON tree, no latency visualization, and no protocol-aware merging. Anyone debugging LLM streaming endpoints or reverse-engineering AI web apps spends most of their time manually reassembling `data:` lines and hunting for the one real stream among dozens of requests. This extension collapses that workflow into a single panel and adds the performance telemetry — frame-interval histograms, TTFT, reconnection markers — that teams otherwise have to instrument by hand.

Summary

SSE DevTools Panel is a standalone Chrome extension that adds a dedicated tab to DevTools for inspecting streaming responses. It automatically captures long-lived connections from fetch, EventSource, and XHR while filtering out static JSON and analytics calls. The panel organizes every pushed frame into a virtual-scrolled table with collapsible JSON trees, supports regex search, and provides a visual timeline that flags any inter-frame gap exceeding 250 ms. A stats dashboard computes first-packet latency, average frame interval, and events per second, and a raw view reconstructs the complete server output for one-click export.

For AI workloads, the extension recognizes proprietary streaming protocols from DeepSeek, Doubao, Kimi, Tongyi Qianwen, Zhipu Qingyan, and Tencent Yuanbao, plus OpenAI-compatible interfaces. It splits the stream into four channels — main text, thinking traces, tool calls, and metadata — so a conversation that arrives as hundreds of `data:` fragments reads as a single structured transcript. Request headers are displayed in-panel with automatic redaction of Authorization, Cookie, and API-key fields.

The tool runs entirely in the browser, is MIT-licensed, and installs from the Chrome Web Store or from source. Known gaps include Service Worker-initiated streams and a 2,000-entry / 4 MB cap on pre-existing history.

Takeaways
— Captures streaming responses from fetch, EventSource, and XHR automatically, filtering out static JSON and analytics traffic.
— Events table uses virtual scrolling to handle 100,000+ frames without freezing, with a collapsible JSON drawer per row.
— Timeline view marks any inter-frame gap ≥250 ms in red and plots an interval-distribution histogram.
— Conversation view recognizes proprietary SSE protocols from six Chinese AI platforms and OpenAI-compatible endpoints, merging fragments into separate channels for main text, thinking, tool calls, and metadata.
— Request panel shows full headers and body with automatic redaction of Authorization, Cookie, token, and api-key fields.
— Stats panel computes first-packet latency, total push duration, average frame interval, max pause, and events per second, plus SSE spec validation.
— Global cross-stream search hits keywords across all captured connections on the page.
— Supports export to JSON, CSV, and raw .sse files, with re-import for offline replay.
— MIT-licensed, installable from the Chrome Web Store or built from source with pnpm; requires Node.js 20+ and a Chromium browser.
Conclusions

Chrome's EventStream tab has remained essentially unchanged for years, creating a vacuum that a single-developer extension can fill with virtual scrolling, JSON trees, and protocol-aware parsing — features that feel table-stakes for any modern API inspector.

The 250 ms red-flag threshold on the timeline is a pragmatic default that surfaces real user-visible latency without requiring manual configuration, and pairing it with a histogram turns a subjective 'it feels slow' into a distribution a backend team can act on.

Automatic redaction of auth headers inside the panel removes a common friction point in team debugging: the choice between sharing a full-request screenshot and manually blurring secrets.

Protocol-specific conversation splitting is the feature that makes this more than a generic stream inspector. It acknowledges that the debugging surface for AI apps is not raw frames but semantic units — thinking, tool calls, final text — and that every vendor encodes those differently.

Concepts & terms
SSE (Server-Sent Events)
A standard allowing a server to push real-time updates to the browser over a single HTTP connection, delivering a stream of `data:` prefixed text frames.
NDJSON (Newline Delimited JSON)
A format where each line is a valid JSON object, often used as an alternative to SSE for streaming structured data.
Virtual Scrolling
A rendering technique that only creates DOM nodes for the visible portion of a large list, keeping the page responsive even with hundreds of thousands of rows.
TTFT (Time to First Token)
The latency between sending a request to an LLM and receiving the first piece of the response, a key metric for perceived responsiveness in streaming AI applications.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗