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.
🤝 Support
If you find this extension useful, consider supporting its development:
✨ Features
🔌 Connection Management
- Quick Connect: Connect to SignalR hubs with a simple URL input
- Multiple Connections: Manage multiple hub connections simultaneously
- Connection Aliases: Set custom names for your connections
- Duplicate Prevention: Automatic detection of duplicate connections
- 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
- Hub Selection: Choose which hub to send messages to
- 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
- Open VS Code
- Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
- Search for "SignalR Hub Debugger"
- Click Install
Quick Start
Open SignalR View
- Click the SignalR icon in the Activity Bar
- Or use Command Palette:
SignalR: Connect to Hub
Connect to a Hub
- Click the "+" button in the Connections view
- Enter your SignalR hub URL
- Optionally configure authentication and headers
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
- Open the debug panel
- Enter method name (e.g., "SendMessage")
- Enter message payload
- Optionally enable Base64 encoding
- Click "Send"
Subscribing to Methods
- In the debug panel, enter a method name to listen for
- Click "Subscribe"
- Incoming messages will appear in the message feed
Decoding Base64 Messages
- Received messages with Base64 content can be decoded
- Click the 🧬 button next to any message
- View the decoded content inline
- 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 connectionSignalR: Disconnect - Close active connectionSignalR: Open Debug Panel - Show debugging interfaceSignalR: Open Messages Panel - Show messages viewSignalR: Clear Messages - Clear message historySignalR: Export Messages - Save messages to fileSignalR: 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:
📄 License
This extension is licensed under the MIT License.
�🙏 Acknowledgments
Built with:
Enjoy debugging with SignalR Hub Debugger! 🚀
