Echoport

The Professional Local Proxy & Debugger.

Tunnel. Proxy. Debug. Replay.

Echoport bridges the gap between the internet and your local development environment. It allows you to inspect, intercept, and replay HTTP traffic flowing to your local machine.

Whether you are integrating third-party webhooks (Stripe, WhatsApp) or debugging communication between your frontend and backend, Echoport provides the visibility and control missing from standard tunneling tools.

⚡️ The Challenge

Standard tools like Ngrok are excellent for connectivity but often lack the tools needed for deep debugging.

Transient History: Restarting the tunnel usually means losing your request logs and public URL.

Limited Visibility: A "500 Internal Server Error" in your frontend often requires digging through terminal logs to understand the root cause.

Manual Testing: If a webhook fails, you typically have to manually trigger the event again to test a fix.

🛡️ The Echoport Solution

Echoport sits between the outside world and your application, capturing every interaction in a persistent local database.

💾 Always-On History: Your request logs are saved to SQLite and persist across restarts.

⏪ Instant Replay: Retry any failed request with a single click.

✏️ Payload Editing: Modify JSON payloads on the fly to test edge cases without triggering real events.

🕵️‍♂️ Full Context: View backend console.log output and stack traces directly alongside the HTTP request in the UI.

📦 Installation

Run instantly (Recommended):

npx echoport 3000

Install globally:

npm install -g echoport

🚀 Core Workflows

1. Debugging Webhooks

Ideal for: Stripe, WhatsApp, Slack, GitHub integrations.

Receive real-time data from external services to your localhost.

Start Echoport: Forward traffic to your app running on port 3000.

echoport 3000

Configure Provider: Copy the Public URL (e.g., https://my-webhook.loca.lt) and paste it into your webhook provider's settings.

Inspect & Fix: Open the dashboard at http://localhost:4000. View incoming requests, fix bugs in your code, and hit Replay to verify the fix immediately.

Tip: Use a custom subdomain to keep your URL consistent:

echoport 3000 --subdomain=my-api-dev

2. Inspecting Local APIs

Ideal for: Frontend <-> Backend development.

Stop guessing why an API call failed. Use Echoport as a proxy to monitor traffic between your services.

Run your Backend: (e.g., on port 8000).

Run Echoport:

echoport 8000

Update Frontend Config: Point your frontend to Echoport's proxy port (4000) instead of the backend directly.

// config.js

// const API_URL = "http://localhost:8000"; // Direct (No UI visibility) const API_URL = "http://localhost:4000"; // Echoport Proxy (Full Logging)

The Result: Your app functions normally, but you now have a visual dashboard for every API interaction, complete with request bodies, response headers, and server logs.

🛠 Enterprise & Advanced Features

🔌 Stable Tunnels with Ngrok

If you require enterprise-grade reliability, Echoport integrates seamlessly with Ngrok.

echoport 3000 --ngrok-token=YOUR_TOKEN

Reliability: Uses Ngrok's infrastructure instead of Localtunnel.

Custom Domains: Supports --domain=api.example.com for paid Ngrok plans.

📂 Workspaces

Organize your logs by project to keep your debug history clean.

echoport 3000 --workspace=billing-service

Switching workspaces in the UI instantly swaps the database context, perfect for developers managing multiple microservices.

📝 Server-Side Log Integration

Echoport can display your backend's console.log and console.error output directly in the Dashboard UI. This creates a unified view of "Network Error" vs. "Server Logic Error."

To enable this, add the following middleware to your local backend (Node.js/Express example):

// Add this middleware BEFORE your API routes app.use((req, res, next) => { const logs = []; const originalLog = console.log; const originalError = console.error;

// 1. Intercept standard logs console.log = (...args) => { logs.push("LOG: " + args.join(' ')); originalLog.apply(console, args); };

// 2. Intercept error logs console.error = (...args) => { logs.push("ERR: " + args.join(' ')); originalError