🌊 Stream Panel - Chrome DevTools Extension for SSE & Fetch Stream Monitoring

English | 中文

---

English

Overview

Stream Panel is a Chrome DevTools extension that allows developers to monitor and inspect streaming requests in real-time. It supports both Server-Sent Events (SSE) and Fetch-based Stream connections, making it an essential tool for debugging streaming APIs and viewing real-time data pushes.

Why Stream Panel?

• 🔥 Most Feature-Rich SSE Monitor: Unlike basic SSE viewers, Stream Panel offers comprehensive filtering, search, and export capabilities
• ⚡ Multiple Stream Types: Supports EventSource, Fetch Stream, and XMLHttpRequest - all in one tool
• 🎯 Real-Time Debugging: Monitor live data streams without leaving Chrome DevTools
• 💾 Data Persistence: Save and restore connection data for later analysis
• 📊 Advanced Analytics: Track connection statistics and message counts
• 🔍 Powerful Search: Full-text search across all messages with highlighting
• 📤 Flexible Export/Import: Export rich JSON/CSV data and import exported JSON sessions for offline analysis

Perfect for: - ✅ Debugging AI chat application streaming responses - ✅ Testing server-sent events and push notifications - ✅ Monitoring real-time APIs and WebSocket alternatives - ✅ Analyzing streaming data patterns - ✅ Quality assurance testing for streaming features

Screenshots

Monitor streaming responses from popular AI chat applications:

ChatGPT

DeepSeek

Doubao

Qwen

Wenxin

Zhipu

Stream Panel works seamlessly with all major AI chat platforms

Features

• 🔍 Real-time Monitoring: Intercept and display all EventSource, Fetch-based SSE, and XMLHttpRequest connections
• 📊 Message Inspection: View detailed message data with collapsible JSON syntax highlighting
• Collapse/expand JSON objects and arrays
• Right-click JSON field names to copy dot-paths such as choices.0.delta.content
• 🔗 Connection Management: Track multiple streaming connections simultaneously
• 🎯 URL Filtering: Filter connections by URL to focus on specific endpoints
• 🏷️ Request Type Badge: Visual indicators for connection types (EventSource, Fetch, XMLHttpRequest)
• 🔎 Message Filtering: Filter messages by JSON field values with fuzzy autocomplete field selector
• Equals/contains match modes
• Multiple filter conditions with AND logic
• Nested field support (dot notation)
• Array field support and current-connection field suggestions
• Keyboard navigation for field suggestions
• Real-time filter statistics
• 🔍 Advanced Message Search: Full-text search across all message content with keyword highlighting
• 🧭 Field Path Display: Enter a JSON path in the message list data column to display only that field
• 💾 Data Export: Export captured data in JSON or CSV format
• Export current connection or all connections
• UTF-8 BOM support for proper encoding in Excel
• Filtered and searched data export support
• Rich connection metadata including request type, source, status, iframe context, frame URL, and timestamps
• 📥 Data Import: Import Stream Panel JSON exports back into the panel
• Import current-connection or all-connections JSON exports
• Restore imported data as archived connections without overwriting live captures
• 📋 Filter Presets: Save and manage custom filter configurations
• Save current filter conditions as reusable presets
• Load saved presets instantly
• Manage preset library (delete, rename)
• 📈 Connection Statistics: View comprehensive analytics
• Total connections and message counts
• Active connection monitoring
• Per-connection statistics with duration tracking
• 🖼️ Iframe Support: Monitor streaming connections in both main page and iframes with visual indicators
• 💾 Connection Persistence: Save and load connections using IndexedDB storage
• Save connection data with custom names
• Load saved connections for later inspection
• Save/load connection configurations
• 📌 Message Pinning: Pin important messages to keep them at the top of the list
• 📜 Auto Scroll: Auto-scroll to latest messages (toggleable)
• 📐 Resizable Columns: Adjust table column widths for better readability
• 🔤 Text Escape Decoder: Decode escaped Unicode/text such as "\u63a8\u7406\u601d\u8003" into readable text
• 🌓 Dark Mode: Automatic dark mode support based on system preferences
• 🚀 Performance Optimization: Efficient rendering and event delegation for large message lists

Comparison with Other Tools

Feature	Stream Panel	SSE Viewer	Network Tab
EventSource Support	✅	✅	⚠️ Limited
Fetch Stream Support	✅	❌	⚠️ Limited
XMLHttpRequest Support	✅	❌	✅
Message Filtering	✅ Advanced	❌	❌
Full-text Search	✅	❌	❌
Field Path Display	✅	❌	❌
Data Export	✅ Rich JSON/CSV	❌	⚠️ Manual
Data Import	✅ JSON	❌	❌
Connection Persistence	✅ IndexedDB	❌	❌
Statistics & Analytics	✅ Comprehensive	❌	Basic
Dark Mode	✅	❌	✅
Real-time Monitoring	✅	✅	✅
Message Pinning	✅	❌	❌
Filter Presets	✅	❌	❌
Text Escape Decoder	✅	❌	❌

Installation

1. Clone or download this repository
2. Open Chrome and navigate to chrome://extensions/
3. Enable Developer mode (toggle in the top-right corner)
4. Click Load unpacked and select the extension directory
5. The extension is now installed and ready to use

Usage

1. Open Chrome DevTools (F12 or Right-click → Inspect)
2. Navigate to the Stream Panel tab
3. The panel will automatically capture all streaming connections from the current page
4. Select a connection from the left panel to view its messages
5. Click on any message to view its detailed JSON content
6. Use the URL filter in the toolbar to filter connections
7. Enter a JSON path in the data column header to show only that field in the message list
8. Use message filters to filter messages by JSON field values
9. Right-click a JSON field name in the detail view to copy its full field path
10. Use the text decoder button on the right side of the toolbar to decode escaped Unicode/text
11. Export data using the export button:
12. Current Connection (JSON): Export selected connection with all its messages
13. Current Connection (CSV): Export messages and connection metadata as CSV format
14. All Connections (JSON): Export all connections and messages
15. All Connections (CSV): Export all messages and connection metadata as CSV format
16. Import data using the import button:
17. Supports JSON files exported by Stream Panel
18. Imported data is added as archived connections in the current panel

How It Works

The extension consists of four main components:

1. inject.js: Injected into web pages to intercept EventSource and fetch API calls
2. content.js: Acts as a message bridge between the injected script and the background script
3. background.js: Manages data storage and communication between content scripts and DevTools panels
4. devtools/panel: The UI panel displayed in Chrome DevTools

Technical Architecture

Web Page
  └── inject.js (intercepts EventSource/fetch)
      └── content.js (message bridge)
          └── background.js (data storage)
              └── devtools/panel (UI display)

Message Inspection

The detail view is designed for inspecting large JSON payloads:

• Collapsible JSON: Expand or collapse objects and arrays directly in the detail view
• Field Path Copying: Right-click any JSON field name and copy its full dot-path
• Path Format: Object keys use dot notation, and arrays include indexes (for example, choices.0.delta.content)

The message list also supports field-focused display:

• Enter a JSON path in the Data column header to show only that field for each message
• Leave the path input empty to restore the original full message data
• This display setting does not change the raw message data, detail view, copy behavior, filtering, search, import, or export

Message Filtering

The extension supports filtering messages by JSON field values:

• Field Selection: Fuzzy autocomplete input box that automatically extracts and suggests all available fields from the currently selected connection
• Suggestions only come from the current connection's parsed JSON messages
• Supports partial, compact, multi-word, and abbreviation-style fuzzy matching
• Supports keyboard navigation with ↑/↓, Enter, and Esc
• Match Modes:
• Equals: Exact match (field value === filter value)
• Contains: Partial match (field value includes filter value)
• Multiple Filters: Supports multiple filter conditions with AND logic
• Nested Fields: Supports nested JSON fields using dot notation (e.g., user.profile.name)
• Array Fields: Supports extracting and matching fields inside arrays of objects
• Filter Statistics: Real-time display of filtered vs total message count
• Collapsible UI: Expand/collapse filter panel with smooth animation

Data Export

The extension provides flexible data export options:

• Export Formats:
• JSON: Structured format with complete metadata (connection info, request type, timestamps, filters applied)
• CSV: Spreadsheet-compatible format with UTF-8 BOM for proper encoding in Excel
• Export Scope:
• Current Connection: Export only the selected connection and its messages
• All Connections: Export all connections and their messages
• Filter/Search Support: Exported CSV/JSON data respects currently applied message filters and search query
• Metadata: Exports include request type (fetch, xhr, eventsource, unknown), raw source, status, iframe flag, frame URL, creation time, message counts, export timestamp, and applied filters

Data Import

The extension can import JSON files exported by Stream Panel:

• Supported Files:
• Current-connection JSON exports
• All-connections JSON exports
• Single connection JSON objects with a messages array
• Import Behavior:
• Imported data is added as archived connections
• Existing live captures are not overwritten
• The first imported connection is automatically selected for inspection

Text Escape Decoder

The toolbar includes a text escape decoder for quickly reading escaped payloads:

• Supports Unicode escapes such as \u63a8\u7406\u601d\u8003
• Supports \u{...}, \xXX, \n, \r, \t, escaped quotes, and backslashes
• Supports copying the decoded result

Development

Project Structure

StreamPanel/
├── manifest.json          # Extension manifest
├── background.js          # Background service worker
├── content.js             # Content script
├── inject.js              # Injection script
├── devtools/
│   ├── devtools.html      # DevTools page
│   ├── devtools.js        # DevTools initialization
│   ├── panel.html         # Panel UI
│   ├── panel.bundle.js    # Panel logic (bundled version)
│   ├── panel.js           # Panel entry (ES Modules)
│   └── modules/          # Modular source code
│       ├── state.js       # State management
│       ├── utils.js       # Utility functions
│       ├── viewManager.js # View management
│       ├── connectionManager.js   # Connection management
│       ├── messageRenderer.js     # Message rendering
│       ├── filterManager.js       # Filter management
│       ├── searchManager.js       # Search functionality
│       ├── exportManager.js       # Export functionality
│       ├── importManager.js       # Import functionality
│       ├── presetManager.js       # Preset management
│       ├── connectionStorageManager.js  # IndexedDB storage
│       ├── savedConnectionsManager.js   # Saved connection management
│       ├── statisticsManager.js   # Statistics management
│       ├── eventHandlers.js       # Event handling
│       └── columnResizer.js      # Column resizing
├── rollup.config.js      # Rollup bundler configuration
├── package.json          # Project dependencies and scripts
└── icons/                # Extension icons

Building the Extension

The project uses Rollup to bundle modular ES Modules into a single file compatible with Chrome DevTools.

Prerequisites:

• Node.js (v14 or higher)
• pnpm

Installation:

# Install dependencies
pnpm install

Build Commands:

# Development build (with sourcemaps)
pnpm build

# Production build (minified)
pnpm build:prod

# Watch mode (auto-rebuild on file changes)
pnpm watch

Development Workflow:

1. Edit files in devtools/modules/
2. Run pnpm build or pnpm watch
3. Reload the extension in Chrome
4. Test changes in DevTools

Output Files:

• devtools/panel.bundle.js - Bundled version (used in production)
• devtools/panel.js - ES Modules entry point (source)

For detailed documentation, see: - PROJECT_CONTEXT.md - Complete project documentation and architecture - docs/QUICK_START.md - Quick start guide

Roadmap

• [x] Export data functionality (JSON/CSV)
• [x] Import exported JSON sessions
• [x] Message filtering with fuzzy autocomplete field selector
• [x] Collapsible JSON detail view
• [x] JSON field path copying
• [x] Message list field path display
• [x] Tex