ChromeDebug MCP Assistant FREE v2.5.0

ChromeDebug MCP visual element selector [FREE Edition] [Build: 2025-10-21-v2.5.0]

ChromeDebug MCP Assistant - AI-Powered Browser Automation & Debugging ChromeDebug MCP is a powerful developer tool designed for modern web development, AI-assisted coding, and automated browser testing. Built with the Model Context Protocol (MCP) for seamless AI integration, it provides comprehensive debugging and automation capabilities for developers using AI coding assistants like Claude Code. You need the chromedebug-mcp server located here https://www.npmjs.com/package/@dynamicu/chromedebug-mcp Just run: npm i -g @dynamicu/chromedebug-mcp For Claude code: claude mcp add chromedebug -s user -- chromedebug-mcp 🎯 KEY FEATURES Screen Recording with Console Logs Capture your browser activity with synchronized console output. Every frame of your recording includes associated console logs, network activity, and user interactions - perfect for debugging complex issues or demonstrating bugs to your team. Workflow Recording & Replay Record complete user workflows including clicks, form inputs, navigation, and interactions. Replay recorded workflows for automated testing or demonstration purposes. Each workflow includes restore points for debugging. Network Monitoring Capture and analyze all network requests during recording sessions. View request/response headers, payloads, timing information, and status codes. Identify slow API calls and network bottlenecks. Performance Monitoring Track Web Vitals metrics including Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Monitor performance impact of code changes in real-time. 🤖 AI INTEGRATION Model Context Protocol (MCP) Compatible Designed to work seamlessly with Claude Code and other AI coding assistants. The extension exposes its functionality through MCP tools, allowing AI systems to control the browser, capture screenshots, and analyze page content. Automated Debugging Workflows AI assistants can use ChromeDebug to automatically reproduce bugs, capture evidence, and analyze issues. This accelerates the debugging process and provides rich context for problem-solving. Intelligent Code Analysis Combined with AI, the extension can analyze page behavior, identify anti-patterns, and suggest optimizations based on real browser data. 📊 USE CASES For Developers: - Debug complex single-page applications with detailed execution traces - Capture reproducible bug reports with video + console logs + network activity - Analyze performance issues with integrated Web Vitals monitoring - Test responsive designs and cross-browser compatibility For QA Engineers: - Record and replay user workflows for regression testing - Automate repetitive testing tasks with workflow playback - Capture detailed evidence of bugs including visual, console, and network data - Validate fixes by comparing before/after recordings For AI-Assisted Development: - Let AI assistants control the browser for automated testing - Enable AI to capture screenshots and analyze page content - Automate documentation by recording feature demonstrations - Accelerate debugging with AI-powered issue analysis For Teams: - Share detailed bug reports with synchronized video, logs, and network data - Document complex workflows for onboarding new team members - Create visual regression tests with screenshot comparisons - Collaborate on performance optimization with shared metrics 🔒 PRIVACY & SECURITY Local-First Data Storage All recordings and data are stored locally on your machine. No cloud uploads without your explicit consent. PII Redaction Automatic redaction of personally identifiable information (PII) in logs and recordings. Protects sensitive data like email addresses, phone numbers, and authentication tokens. Controlled Access Content scripts only activate on development domains (localhost, *.local, *.test, *.dev) by default. Major sites like YouTube, Google, Facebook, and Twitter are explicitly excluded to protect user privacy. No Tracking The extension does not collect analytics or usage data. Your development workflow remains private. Firebase Integration (Optional) Optional Firebase integration for license management and cloud storage. All Firebase communication is encrypted and requires explicit user consent. 💎 FREEMIUM MODEL Free Tier: - 5 screen recordings per day - Full element selection and inspection - Basic function tracing - Community support Pro Tier: - Unlimited screen recordings - Advanced performance analytics - Priority support - Extended session duration (up to 30 minutes) - Cloud storage for recordings (optional) 🛠️ TECHNICAL SPECIFICATIONS Modern Architecture: - Manifest V3 for latest Chrome APIs - Service worker-based background processing - Offscreen document for efficient video encoding - IndexedDB for large data storage - WebSocket for real-time communication Optimized Performance: - Frame capture at configurable FPS (1-60) - Intelligent compression with Pako (gzip) - Memory-efficient streaming for large recordings - Background processing to avoid UI blocking Developer-Friendly: - Clean, documented codebase - Extensive error handling and logging - Unit tested core functionality - Open architecture for extensions 📋 PERMISSIONS EXPLAINED - activeTab: Interact with the current tab for element selection - scripting: Inject console interception scripts - tabs: Manage recording sessions across tabs - storage: Store recordings and preferences locally - tabCapture: Capture screen content for video recording - desktopCapture: Enable high-quality screen recording - notifications: Notify about recording status and errors - offscreen: Process video frames efficiently in background 🚀 GETTING STARTED 1. Install the extension from Chrome Web Store 2. Click the ChromeDebug icon in your toolbar 3. Navigate to a development site (localhost, etc.) 4. Click "Start Recording" to capture screen + console logs 5. Use element selection to inspect and manipulate DOM elements 6. View recordings in the extension popup or export for sharing 💬 SUPPORT - Documentation: Available in extension popup - GitHub: Report issues and request features - Email Support: Pro users get priority email support - Community: Join discussions and share workflows 🎉 PERFECT FOR - Full-stack developers building complex web applications - QA engineers automating browser testing - DevOps teams setting up CI/CD visual regression tests - Developers using AI coding assistants like Claude Code - Teams needing detailed bug reproduction tools - Performance engineers optimizing Web Vitals ChromeDebug MCP bridges the gap between AI assistance and browser automation, making development faster, debugging easier, and testing more reliable. Whether you're working solo or with a team, ChromeDebug provides the tools you need to build better web applications.