dev-with-debug

Auto-start Chrome-based dev server with debugging enabled, streaming LLM-friendly error output to your terminal.

Features

• 🚀 Auto-detects existing dev server commands in your project
• 🔍 Chrome DevTools integration for comprehensive error monitoring
• 🤖 LLM-optimized error formatting for efficient troubleshooting
• 📦 Framework agnostic - works with Vite, Webpack, Next.js, and more
• ⚡ Zero configuration - just install and run

Installation

npm install --save-dev dev-with-debug

The package automatically adds a dev-with-debug script to your package.json during installation.

Usage

npm run dev-with-debug

This will:

1. Start your existing dev server (detects dev, start, or serve scripts)
2. Launch Chrome with debugging enabled
3. Monitor for errors and stream them to your terminal in LLM-friendly format

How it works

The tool automatically detects your project's dev server command and launches it alongside Chrome with the DevTools Protocol enabled. All JavaScript errors, console errors, and unhandled promise rejections are captured and formatted for easy consumption by LLMs.

Error Format

Errors are output in a structured format:

🚨 DEBUG ERROR:
Type: RUNTIME_ERROR
Time: 2024-01-15T10:30:45.123Z
Message: Cannot read property 'foo' of undefined
Location: /src/components/MyComponent.js:25:10
Stack: TypeError: Cannot read property 'foo' of undefined
──────────────────────────────────────────────────

Requirements

• Node.js >= 14.0.0
• Chrome/Chromium browser installed
• Existing dev server script in package.json (dev, start, or serve)

License

MIT