Chrome DevTools · SSE / NDJSON

Understand SSE streams in DevTools

Leave raw fragments behind—capture SSE / NDJSON from the page, parse and visualize in one panel.

See demo GitHub
F12 → SSE DevTools · /api/stream
LIVE
SSE DevTools Panel overview: Streams list, Timeline, and event details

Why you need it

  1. 01 Network does not cover these streams

    The EventStream tab is built for standard SSE. Many AI streams use fetch + NDJSON / Connect+JSON, so Network mostly shows a whole Response body without a per-event view.

  2. 02 Only total request duration

    First-byte delay, chunk gaps, stalls, and reconnects stay buried inside total request time—Network does not call them out.

  3. 03 Chat is scattered in raw frames

    Thinking, content, and tool calls mix in raw data, so you have to reassemble a reply by hand—Conversation merges them by channel.

Built for stream debugging

Install and go—see every step of SSE / NDJSON inside DevTools.

  1. 01
    Events tab listing streamed events in order

    See every event

    Auto-capture fetch / EventSource / XHR and group by stream.

    • Events
    • Streams
    • NDJSON
  2. 02
    Timeline tab visualizing event gaps and stalls

    See stream timing

    Timeline and Stats mark first byte, gaps, and stalls—clearer than Network total duration alone.

    • Timeline
    • TTFT
  3. 03
    Conversation tab showing merged assistant content

    Conversation, assembled

    Thinking, content, and tool calls in separate channels—no more raw NDJSON.

    • Conversation
    • AI Web
SSE DevTools main workbench
  • DevTools
  • MV3

Open F12 and debug

No proxy or code changes—debug SSE / NDJSON streams directly in the DevTools panel.

DeepSeek page with Conversation merge demo
  • Conversation
  • DeepSeek
  • AI Web

Real AI chats, merged live

On sites like DeepSeek, thinking, content, and search merge into channels while the stream runs—no reading raw frames by hand.

Virtual scrolling demo with many events
  • Virtual scroll
  • Events
  • Raw

Smooth scrolling on long streams

Events, Conversation, and Raw use virtual scrolling—only on-screen rows render, so heavy streams stay responsive.

SSE DevTools night theme workbench
  • Night
  • Theme

Night theme for late debugging

Switch Light / Night / Follow DevTools from the toolbar; preference syncs with Chrome for comfortable night work.

Request tab showing headers and basics
  • Request
  • Headers

Request context at a glance

Inspect method, status, Content-Type, and headers in Request—sensitive fields are redacted so you can compare with the stream safely.

Stats dialog with stream performance metrics
  • Stats
  • Anomalies

Stats for stream health

First-byte delay, duration, avg / max gap, and events per second in one place—pair with Anomalies / Spec when something looks off.

FAQ

Install and use—no long tutorial required. See GitHub README for details.

Which browsers are supported?

Chromium-based browsers (Chrome, Edge, etc.) with Manifest V3 and DevTools extensions. After install, open F12 and select the SSE DevTools tab.

How do I install the offline zip?

Download the offline zip → extract → open chrome://extensions → enable Developer mode → Load unpacked → select the dist/ folder.

Is my data uploaded?

No. The extension parses and displays streams locally. Chrome may warn about an unverified extension in developer mode—that is expected.

How is this different from the Network panel?

Network shows whole requests; SSE DevTools is stream-native—per-event parsing, conversation merge, timeline rhythm, and TTFT for AI chats and NDJSON protocols.

More features and screenshots: GitHub README

Get the extension

Pick one path. Use the offline zip if the Web Store is unreachable.

Developers can also build from GitHub Releases . Chrome may warn about an unverified extension in developer mode; all data stays on your machine.