A debugging assistant that captures everything happening in your web app during development - server logs, browser events, network requests, and automatic screenshots - organized in a timeline that AI can understand.
pnpm install -g dev3000
dev3000Then tell Claude: "fix my app"
- Node.js >= v22.12.0 (required for Chrome DevTools Protocol support)
dev3000 runs your development server and monitors it in a headless browser, capturing:
- Server logs and console output
- Browser console messages and errors
- Network requests and responses
- Automatic screenshots (navigation, errors, interactions)
- User interactions (clicks, form submissions)
Everything is saved to timestamped logs that AI assistants can read to understand what went wrong and suggest fixes.
View the timeline at http://localhost:3684/logs
dev3000 provides an MCP server with debugging tools that Claude Code can use:
- fix_my_app - Analyzes logs, finds errors, suggests fixes
- execute_browser_action - Takes screenshots, clicks, navigates
- restart_dev_server - Restarts your server safely
- crawl_app - Discovers all routes in your app
- find_component_source - Maps DOM elements to source code
When you run dev3000 in a project with Next.js or if you have chrome-devtools MCP installed, it automatically integrates with those too.
pnpm install -g dev3000
cd your-project
dev3000pnpm add -D dev3000
pnpm dev3000- Start dev3000 in your project
- Open Claude Code
- Say "fix my app" or ask debugging questions
That's it. Claude automatically discovers the dev3000 MCP server and can read your logs.
dev3000 --helpKey options:
--port <number>- Development server port (default: 3000)--mcp-port <number>- MCP server port (default: 3684)--no-browser- Skip browser monitoring--playwright- Use Playwright instead of Chrome extension
dev3000 automatically integrates with:
- Claude Code - Works out of the box, no configuration needed
- chrome-devtools MCP - Advanced browser inspection when installed
- nextjs-dev MCP - Next.js-specific debugging when installed
The MCP server discovers available tools automatically and suggests them when relevant.
# Run dev server locally
pnpm dev
# Build for production
pnpm build
# Run tests
pnpm test
# Lint code
pnpm lintAutomatically installs and manages a Chrome extension for monitoring. Best for most projects.
dev3000 --playwrightUses Playwright's browser automation. Better for:
- CI/CD environments
- Automated testing
- Projects that need precise browser control
The extension has some limitations (stricter security, no incognito mode support) but provides better real-world monitoring.
Logs are stored in:
/var/log/dev3000/(if writable)- OS temp directory (fallback)
Each project gets its own log files, automatically rotated (keeps 10 most recent).
Yes, but you'll need to manually configure the MCP server connection. See the MCP documentation for your AI assistant.
Yes. dev3000 works with any web framework (React, Vue, Svelte, vanilla JS, Rails, Django, etc.). It just monitors your dev server and browser.
The Chrome extension runs in a real browser instance for authentic monitoring. Playwright uses browser automation which is better for CI/CD but may behave slightly differently.
Ctrl+C or Cmd+C stops both dev3000 and your development server.
Screenshots are embedded in the log files and viewable in the web UI at http://localhost:3684/logs
We welcome contributions! Please see our contributing guidelines.
MIT
