# Quick Start Guide
Get started with Debug MCP in 5 minutes!
## Installation
```bash
# Install dependencies
npm install
# Build the project
npm run build
```
## Start the Server
```bash
npm start
```
You should see:
```
[Debug MCP] HTTP API server listening on port 3000
[Debug MCP] Log endpoint: http://localhost:3000/api/log
[Debug MCP] MCP server started on stdio
[Debug MCP] Ready to receive requests
```
## Configure MCP Client
Add to your Claude Desktop config (`claude_desktop_config.json`):
**Windows:**
```json
{
"mcpServers": {
"debug-mcp": {
"command": "node",
"args": ["D:\\work\\debug-mcp\\dist\\index.js"],
"env": {
"DEBUG_PORT": "3000"
}
}
}
}
```
**macOS/Linux:**
```json
{
"mcpServers": {
"debug-mcp": {
"command": "node",
"args": ["/path/to/debug-mcp/dist/index.js"],
"env": {
"DEBUG_PORT": "3000"
}
}
}
}
```
Restart Claude Desktop to load the MCP server.
## Quick Test
Test the HTTP API:
```bash
# Check server health
curl http://localhost:3000/health
# Send a test log
curl -X POST http://localhost:3000/api/log \
-H "Content-Type: application/json" \
-d '{"message": "Test log", "level": "info"}'
# Read logs back
curl http://localhost:3000/api/log
```
## Example Debugging Session
In Claude Desktop, try this:
```
User: I have a bug in my login button. When I click it, nothing happens. The file is src/components/Login.js
Claude: Let me help you debug this login button issue.
[Claude uses analyze_bug tool]
Possible causes:
1. Event listener not properly attached
2. JavaScript error preventing execution
3. CSS blocking interaction
[Claude uses detect_environment tool]
Environment: browser (95% confidence)
[Claude uses add_debug_logs tool]
✓ Added debug logs at line 25 in src/components/Login.js
[Claude uses create_test_steps tool]
Please follow these steps:
1. Open your application
2. Click the login button
3. Check if debug logs appear
After testing, let me know:
• "Bug已修复" - if it's fixed
• "Bug未修复" - if it still doesn't work
User: Bug未修复
Claude: Let me check the debug logs...
[Claude uses read_debug_logs tool]
Analysis: No logs received. The click handler might not be executing.
[Claude uses add_debug_logs tool]
✓ Added more debug logs to check if event listener is attached
... (continues until bug is fixed)
User: Bug已修复!
Claude: Great! Let me clean up the debug code...
[Claude uses remove_debug_logs tool]
✓ Removed all debug logs from src/components/Login.js
Bug fixed successfully! The issue was that the event listener
was not properly attached to the button.
```
## Common Commands
```bash
# Development
npm run build # Compile TypeScript
npm start # Start server
npm run dev # Build and start
# Testing
curl http://localhost:3000/health # Check if server is running
curl http://localhost:3000/api/log # Read logs
curl -X DELETE http://localhost:3000/api/log # Clear logs
```
## Troubleshooting
**Port already in use?**
Change the port in `.env`:
```env
DEBUG_PORT=3001
```
**TypeScript compilation errors?**
```bash
rm -rf dist node_modules
npm install
npm run build
```
**MCP not connecting in Claude Desktop?**
1. Check the path in config is correct
2. Ensure `npm run build` was run
3. Check Claude Desktop logs for errors
**Debug logs not appearing?**
1. Verify server is running: `curl http://localhost:3000/health`
2. Check browser console for `[Debug Log Failed]` errors
3. Ensure application can reach localhost:3000
## Next Steps
- Read [README.md](README.md) for full documentation
- Check [ADAPTERS.md](ADAPTERS.md) for supported environments
- See [EXAMPLES.md](EXAMPLES.md) for detailed usage examples
## Support
If you encounter issues:
1. Check the console output from `npm start`
2. Review error messages in Claude Desktop
3. Verify all dependencies are installed
4. Ensure TypeScript compiles without errors
