SignalR Hub Debugger

A powerful Visual Studio Code extension for debugging and testing SignalR connections in real-time. Simplify your SignalR development workflow with an intuitive interface for managing connections, sending messages, and monitoring hub communications.

✨ Features

🔌 Connection Management

• Quick Connect: Connect to SignalR hubs with a simple URL input
• Multiple Connections: Manage multiple hub connections simultaneously
• Connection Profiles: Save and reuse connection configurations
• Auto-Reconnect: Automatic reconnection with configurable retry logic
• Connection State Monitoring: Real-time connection status updates

📨 Message Testing

• Send Messages: Test hub methods with custom parameters
• Base64 Encoding: Automatic Base64 encoding for message payloads
• Message History: Track all sent and received messages
• Message Decoding: Built-in Base64 decoder for message inspection
• Copy to Clipboard: Quickly copy message data for analysis

📊 Real-Time Monitoring

• Live Message Feed: View incoming and outgoing messages in real-time
• Message Statistics: Track message counts, latency, and connection metrics
• Expandable Details: Click to view full message payloads
• Direction Indicators: Visual distinction between sent and received messages
• Timestamp Tracking: Precise timing information for all messages

💾 Data Management

• Export Messages: Export message history to JSON files
• Import Connections: Load saved connection profiles
• Clear History: Quick actions to clear message logs
• Persistent Storage: Connection profiles saved between sessions

🎨 User Interface

• Sidebar Integration: Dedicated SignalR activity bar view
• Debug Panel: Full-featured debugging interface
• Messages Panel: Dedicated panel for message inspection
• VS Code Themes: Seamless integration with VS Code color themes
• Responsive Design: Optimized for different screen sizes

🚀 Getting Started

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "SignalR Hub Debugger"
4. Click Install

Quick Start

1. Open SignalR View

   • Click the SignalR icon in the Activity Bar
   • Or use Command Palette: SignalR: Connect to Hub

2. Connect to a Hub

   • Click the "+" button in the Connections view
   • Enter your SignalR hub URL
   • Optionally configure authentication and headers

3. Start Testing

   • Select methods to subscribe to
   • Send test messages
   • Monitor real-time responses

📖 Usage Examples

Basic Connection

Hub URL: https://your-signalr-hub.com/hub

With Query Parameters

Hub URL: https://your-signalr-hub.com/hub?userId=123&token=abc

Sending Messages

1. Open the debug panel
2. Enter method name (e.g., "SendMessage")
3. Enter message payload
4. Optionally enable Base64 encoding
5. Click "Send"

Subscribing to Methods

1. In the debug panel, enter a method name to listen for
2. Click "Subscribe"
3. Incoming messages will appear in the message feed

Decoding Base64 Messages

1. Received messages with Base64 content can be decoded
2. Click the 🧬 button next to any message
3. View the decoded content inline
4. Toggle back to original format anytime

🎯 Use Cases

• API Development: Test SignalR endpoints during development
• Integration Testing: Verify hub behavior with different scenarios
• Debugging: Troubleshoot real-time communication issues
• Performance Testing: Monitor message latency and throughput
• Protocol Analysis: Inspect message formats and payloads
• Training: Learn SignalR concepts with visual feedback

⚙️ Configuration

Connection Options

• Hub URL: The SignalR hub endpoint
• Access Token: Bearer token for authenticated connections
• Query Parameters: Additional URL parameters
• Custom Headers: HTTP headers for the connection
• Skip Negotiation: Bypass negotiation phase
• Transport: Choose WebSockets, Server-Sent Events, or Long Polling

Extension Settings

This extension contributes the following settings:

• signalr-hub-debugger.autoReconnect: Enable automatic reconnection (default: true)
• signalr-hub-debugger.reconnectDelay: Delay between reconnection attempts in ms (default: 5000)
• signalr-hub-debugger.maxMessages: Maximum messages to keep in history (default: 500)

🔧 Commands

Access these commands through the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

• SignalR: Connect to Hub - Create a new connection
• SignalR: Disconnect - Close active connection
• SignalR: Open Debug Panel - Show debugging interface
• SignalR: Open Messages Panel - Show messages view
• SignalR: Clear Messages - Clear message history
• SignalR: Export Messages - Save messages to file
• SignalR: Delete Connection - Remove saved connection

🛠️ Requirements

• Visual Studio Code version 1.75.0 or higher
• Active SignalR hub endpoint (development or production)

🔒 Privacy & Security

• All connections are made directly from your local machine
• No data is sent to third-party services
• Connection credentials are stored locally in VS Code
• Base64 encoding/decoding happens client-side

🐛 Known Issues

• Large message payloads (>2MB) may cause UI slowdown
• Some legacy SignalR servers may require skip negotiation

📝 Release Notes

0.1.0 - Initial Release

Features:

• ✅ SignalR connection management
• ✅ Real-time message monitoring
• ✅ Send and receive messages
• ✅ Base64 encoding and decoding
• ✅ Connection profiles
• ✅ Message export functionality
• ✅ Statistics and metrics
• ✅ Multi-connection support

🤝 Support

For issues, questions, or feature requests:

• Issues: Use the feedback button in VS Code
• Email: support@yourcompany.com

📄 License

This extension is licensed under the MIT License.

🙏 Acknowledgments

Built with:

• @microsoft/signalr - Official SignalR JavaScript client
• VS Code Extension API

Enjoy debugging with SignalR Hub Debugger! 🚀