debug-bridgelisted
Install: claude install-skill stevengonsalvez/agents-in-a-box
# Debug Bridge Runbook
Control web apps via WebSocket. Click, type, screenshot, inspect, capture network traffic, monitor navigation.
## Prerequisites (Webapp Setup)
**The webapp MUST have the debug-bridge SDK installed and configured before agents can control it.**
### Step 1: Install SDK in Webapp
```bash
npm install debug-bridge-browser
```
### Step 2: Add Initialization Code
Create `src/debug-bridge.ts` (or add to your app's entry point):
```typescript
import { createDebugBridge } from 'debug-bridge-browser';
// ONLY runs in development - safe to leave in production builds
if (import.meta.env.DEV) {
const params = new URLSearchParams(window.location.search);
const session = params.get('session');
const port = params.get('port') || '4000';
if (session) {
const bridge = createDebugBridge({
url: `ws://localhost:${port}/debug?role=app&sessionId=${session}`,
sessionId: session,
appName: 'My App', // Shows in CLI when connected
appVersion: '1.0.0',
// Feature toggles (all true by default)
enableNetwork: true, // Capture fetch/XHR requests
enableNavigation: true, // Track route changes
enableConsole: true, // Capture console.log/error
enableErrors: true, // Capture unhandled errors
// Optional: filter which URLs to capture
networkUrlFilter: (url) => !url.includes('/analytics'),
maxNetworkBodySize: 10000, // Truncate large request/response bodies
});
bridge