dev-with-debug/README.md

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

# 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

```bash
npm install --save-dev dev-with-debug
```

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

## Usage

```bash
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