Foreword: Who Understands the Frustration of Debugging Streaming Interfaces?

Hello~ everyone, I am a gust of autumn wind

Frontend/full-stack developers working on AI conversations, real-time push notifications, or progress reporting have definitely experienced this suffocating moment:

You need to integrate a streaming interface. You open the Chrome Network panel, and the Response is densely packed with data: {...} fragments. An entire conversation is broken into hundreds of small frames, with thinking, main text, and tool calls all mixed together. To locate a specific field, you can only scroll frantically and repeatedly use Ctrl+F to search, your eyes blurring until you can't tell which segment is the actual output.

Chrome's built-in EventStream tab seems like it can view events, but it's purely "usable, but hard to use":

• The table only shows four columns: id, type, data, time. There's no collapsible JSON tree, making copying fields a hassle;
• The timestamps are bare, making it impossible to see frame interval lag;
• Not to mention separating and categorizing thinking and tool content, troubleshooting performance bottlenecks is purely guesswork.

What's even more torturous is reverse-engineering third-party AI web protocols: open any conversation page for Doubao, Kimi, DeepSeek, or Tongyi, and the Network panel is instantly flooded with tracking events, static resources, and auth XHRs. Among dozens of requests hides a single real streaming interface, and you have to click through them one by one hoping for luck.

Vendors' frame formats aren't even standardized, making every protocol reverse-engineering session feel like cracking an encrypted telegram. Spending half an hour without finding the key stream is the norm.

Dedicated Debugging Panel Launched: Auto Stream Capture + Smart Merging, Say Goodbye to Manual Filtering

After enduring this countless times, I simply gave up on the native Network debugging logic and built a dedicated Chrome DevTools panel from scratch — SSE DevTools Panel, specifically designed to cure all the pain points of SSE, NDJSON, and Connect+JSON streaming debugging. It's completely open-source and free.

After installation, a new independent SSE DevTools tab will appear in the F12 console. It automatically captures all streaming requests initiated by fetch, EventSource, and XHR, automatically filtering out ordinary tracking events and static JSON. The sidebar only keeps the long connections that truly need debugging, eliminating manual filtering.

It features dedicated protocol recognition for mainstream domestic AI web pages and OpenAI-compatible interfaces, allowing one-click merged reading of fragmented conversations. No more manually splicing data fragments.

1. Events: Smooth Browsing of Hundreds of Thousands of Frames, JSON Structure at a Glance

Select any stream in the sidebar, and the Events panel organizes all pushed frames into a neat table: sequence number, arrival time, event name, and data summary are clear at a glance.

• No Lag with Massive Traffic: Built-in virtual scrolling ensures that even with 100,000+ events pushed at once, the page won't freeze, only rendering the visible area of the screen;
• Collapsible JSON Drawer: Click a single event row, and a collapsible JSON tree pops up on the right. Copying fields and viewing nested structures can be done easily, goodbye to native plain text garbled output;
• Flexible Search and Filter: Supports both plain text and regex search modes, with freely draggable column widths;

Compared to this, the native EventStream seems like a product from the Stone Age.

2. Request: No Need to Switch Back to Network, Sensitive Info Auto-Masked

No need to jump back and forth between multiple Network tabs to check request headers and bodies. The complete request info for this stream is all in the Request panel: it fully records the request method, URL, response status, all request headers, and the request body. Simultaneously, it automatically masks sensitive fields: Authorization, Cookie, various tokens, and api-key are hidden. When sending screenshots to the backend for joint debugging, you don't have to worry about leaking keys, which is both convenient and secure.

3. Timeline: Spot Lag, Disconnection, and Reconnection Issues at a Glance

This is the ace feature for troubleshooting streaming interface performance and stream interruption bugs, completely solving the problem of "not knowing where it's stuck":

• Visual Timeline: Every event is arranged according to its actual arrival time, allowing you to intuitively see the frame push rhythm;
• Lag Highlighted in Red: Adjacent frame intervals ≥250ms are automatically marked in red, allowing you to pinpoint delay nodes at a glance. Click to jump directly to the corresponding Events row;
• Interval Distribution Histogram: Statistics on the distribution of all frame intervals, making long pause clusters clear at a glance. No need to verbally describe synchronization performance issues with the backend;
• EventSource Specific Markers: Automatically identifies reconnection behavior, marking the number of reconnections and Last-Event-ID, making troubleshooting disconnection and retry issues a one-step process.

Whether it's high Time to First Token (TTFT) latency, mid-stream long pauses, or frequent reconnections due to network jitter, opening the Timeline can precisely lock onto the root cause.

4. Raw: One-Click Copy of the Complete Raw Stream, Super Convenient for Reproducing Bugs

Sometimes you suspect a parsing logic error or need to provide the backend with a raw reproduction sample. The Raw panel concatenates all frames into the complete original output from the server, supporting one-click select-all and copy. Ultra-long streams also use virtual scrolling, so the page won't freeze during loading. It's extremely convenient for cross-referencing parsing differences against the Events and Conversation views. Sharing a file for joint debugging is far clearer than screenshots.

5. Conversation: AI Conversation Fragments Automatically Split for Reading

Built specifically for reverse-engineering AI web pages and debugging large model conversation APIs, this was also the core motivation for creating this plugin. It automatically identifies the private streaming protocols of major vendors, integrating scattered data fragments and displaying content across four independent channels:

• Main Text: The model's final output answer;
• Thinking: Deep thinking and reasoning process;
• Tools: Function calls, web searches (search content automatically organizes query terms and source cards, displaying titles, summaries, and URLs by category);
• Metadata: Model name, token usage, finish reason, protocol identifier.

Currently Natively Adapted AI Web Platforms

DeepSeek, Doubao, Kimi, Tongyi Qianwen, Zhipu Qingyan, Tencent Yuanbao, along with compatibility for all OpenAI standard compatible streaming interfaces; the Anthropic series has only completed protocol identification, with the conversation merging feature under continuous iteration; unlisted sites automatically switch to a general Events view, with basic debugging functions completely unaffected.

No more manually copying and splicing hundreds of lines of fragments. The efficiency of reverse-engineering competitor protocols and self-developed AI conversation joint debugging is directly doubled.

6. Accompanied by a Full-Featured Debugging Toolkit, Meticulously Detailed

1. Stats Quantitative Statistics Panel

Generate complete data metrics for this stream with one click: first packet latency, total push duration, average frame interval, maximum pause interval, events per second. Timeline shows local lag, Stats shows overall performance, providing data-backed evidence when aligning with the backend. It also automatically scans for abnormal frames like empty data and ultra-long intervals, along with SSE specification validation, checking line breaks, BOM, and field formats against HTML standards. A divine tool for debugging self-developed SSE servers.

2. Search All Global Cross-Stream Search

Ordinary search only works on a single stream. Global search can search all captured streaming requests on the current page. Enter a keyword to hit the corresponding stream and event. No need to click through streams one by one to find content in multi-concurrent stream scenarios.

3. Complete Import/Export Archiving

Supports exporting JSON, CSV, and .sse raw stream files for local archiving of debugging samples. Exported JSON can be re-imported into the panel for playback and review. Reproducing occasional online bugs doesn't require repeatedly recreating the page scenario; just load the archive to analyze.

4. Basic Control Functions

The panel supports pausing capture (it continues capturing in the background, and fills in all data upon resuming), one-click clearing of all capture records, and Chinese/English bilingual switching, adapting to different development habits.

Three-Minute Local Installation Tutorial, Ready to Use Out of the Box

Recommended: Install from the Chrome Web Store, then open the target page → F12 → SSE DevTools → Refresh the page first before triggering the streaming request.

Load from Source Code (Development / Local Build):

# Clone the repository
git clone https://github.com/FatMii/sse-devtools-panel.git
cd sse-devtools-panel
# Install dependencies and package
pnpm i && pnpm build
# Local demo service (comes with multiple types of streaming test pages)
pnpm demo

1. Enter chrome://extensions in the Chrome address bar, and enable Developer mode in the top right corner;
2. Click 'Load unpacked extension' and select the dist folder inside the repository;
3. Open the demo page http://127.0.0.1:8765, press F12 to switch to the SSE DevTools tab, and refresh the page;
4. Click the Fetch SSE, EventSource, XHR, and NDJSON buttons respectively. The sidebar will automatically capture the test streams, and all panel functions can be experienced.

For daily development, after modifying code, run pnpm dev for real-time build monitoring. Click reload on the extension management page for changes to take effect. Prerequisite environment requirements: Node.js 20+, pnpm 10.x, Chrome/Edge or other Chromium-based browsers.

Objective Explanation: Plugin Positioning and Current Limitations

What It Is

An independent DevTools dedicated streaming debugging panel, specifically supplementing the long-connection analysis capabilities missing from the native Network panel;

What It Is Not

It will not replace the complete audit functions of the Network panel, nor is it a global packet capture MITM proxy;

Known Limitations

• Cannot capture streaming requests initiated inside Service Workers;
• Some niche, low-level streaming APIs may be missed. If encountered, please file an Issue with reproduction steps;
• AI vendor protocols will iterate frequently. If the conversation splitting feature fails, you can export the Raw file and provide feedback for adaptation;
• For historical streams pushed before the page was opened, a maximum of 2000 entries/4MB is cached. If exceeded, the earliest data will be discarded.

The limitations are all within a controllable range, fully covering 99% of daily streaming debugging scenarios.

Finally: Fully MIT Open Source, Welcome to Build Together

The project is fully MIT open source, with no feature castration and no paywalls. Repository address: https://github.com/FatMii/sse-devtools-panel

Whether for daily debugging of self-developed SSE/AI streaming interfaces or reverse-engineering the web protocols of major models, install it to escape the torture of a screen full of garbled data.

If you find it useful, welcome to Star the repository; if you encounter bugs, have new vendor adaptation needs, or want to propose feature optimizations, just open an Issue with a reproduction sample. I will continue to iterate and update.

No more struggling with fragmented streaming data. Leave the time for business development, not wrestling with debugging tools.