Skip to main content

Secure Tunnels

DebuggAI connects to your localhost safely without exposing your app to the internet.

How Tunnels Work​

Traditional Approach Problems​

  • Port forwarding: Exposes your dev server publicly
  • VPN setup: Complex configuration and management
  • ngrok-style tools: Random public URLs, security concerns
  • Deploy-to-test: Slow feedback, environment differences

DebuggAI's Secure Tunnel​

Your Localhost ←→ Encrypted Tunnel ←→ Remote Browser
     :3000              TLS 1.3           Cloud Testing

Key benefits:

  • No public exposure of your application
  • Works behind corporate firewalls
  • No network configuration required
  • Encrypted end-to-end communication

Security Features​

Encryption​

  • TLS 1.3 encryption: All traffic encrypted in transit
  • Certificate pinning: Prevents man-in-the-middle attacks
  • Perfect forward secrecy: Session keys can't be compromised retroactively

Access Control​

  • Authenticated connections: Only your tests can access tunnel
  • Time-limited sessions: Tunnels expire automatically
  • IP restrictions: Connections only from DebuggAI infrastructure
  • No data persistence: Nothing stored after test completion

Privacy Protection​

  • No source code access: Only DOM and visual data transmitted
  • Minimal data transfer: Only what's needed for testing
  • GDPR compliant: Data handling follows privacy regulations
  • SOC 2 Type II: Enterprise security standards

Network Requirements​

Firewall Compatibility​

  • Outbound HTTPS only: Uses standard port 443
  • No inbound rules: No ports need to be opened
  • Proxy support: Works through corporate proxies
  • VPN compatible: Functions within VPN environments

Bandwidth Usage​

  • Initial handshake: Less than 1KB for tunnel establishment
  • DOM transmission: ~10-50KB per page (compressed)
  • Screenshots: ~100-500KB per test
  • Total per test: Usually less than 1MB

How It Compares​

MethodSecuritySetupSpeedMaintenance
Public deployment❌ ExposedComplexSlowHigh
ngrok/tunneling⚠️ Public URLMediumFastMedium
DebuggAI tunnels✅ PrivateZeroFastZero

Technical Implementation​

Connection Establishment​

  1. Authentication: VS Code extension authenticates with DebuggAI
  2. Tunnel request: Test initiation creates tunnel request
  3. Handshake: Secure connection established
  4. Verification: Localhost accessibility confirmed
  5. Testing: Remote browser connects through tunnel

Traffic Flow​

graph LR
    A[VS Code] --> B[DebuggAI Extension]
    B --> C[Secure Tunnel]
    C --> D[Cloud Browser]
    D --> E[Your Localhost:3000]
    E --> D
    D --> C
    C --> B
    B --> A

Error Handling​

  • Connection failures: Automatic retry with exponential backoff
  • Timeout handling: Graceful degradation for slow connections
  • Network interruption: Resume capability for temporary outages
  • Port conflicts: Automatic port detection and adaptation

Troubleshooting Tunnels​

Common Issues​

Tunnel won't establish

  • Check internet connectivity
  • Verify localhost server is running
  • Confirm port number in extension settings
  • Try reloading VS Code window

Slow test execution

  • Check localhost server performance
  • Monitor network latency
  • Consider optimizing page load times
  • Review browser developer tools for bottlenecks

Intermittent failures

  • Examine network stability
  • Check for VPN disconnections
  • Review corporate proxy settings
  • Monitor localhost server logs

Diagnostics​

Use built-in diagnostics:

  1. VS Code Command Palette: "DebuggAI: Test Connection"
  2. Extension logs: Check Output panel → DebuggAI
  3. Network status: Extension shows connection health
  4. Support data: Extension can export diagnostic info

Best Practices​

Performance Optimization​

  • Keep localhost responsive: Optimize dev server performance
  • Minimize page complexity: Simpler pages test faster
  • Use production-like data: Realistic but lightweight test data
  • Monitor resource usage: Watch for memory/CPU spikes during tests

Security Hygiene​

  • Regular updates: Keep extension updated for security patches
  • Token management: Don't share authentication tokens
  • Network monitoring: Be aware of unusual network activity
  • Access auditing: Review test logs for unexpected activity

Development Workflow​

  • Test early: Don't wait for perfect code
  • Iterate quickly: Use fast feedback loop for improvements
  • Clean state: Start tests with known good application state
  • Realistic scenarios: Test with data similar to production

Next: Learn to write effective Test Descriptions for better AI understanding.