跪拜 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.
From the discussion

The feedback is limited to appreciation and a brief mention of solving AI development pain points, with no substantive debate or competing views.

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗