chrome-devtools-mcp-automation

# Chrome DevTools MCP Automation > Skill by [ara.so](https://ara.so) — Devtools Skills collection. Chrome DevTools MCP (`chrome-devtools-mcp`) is an MCP server that gives AI coding agents full control over Chrome browser automation, debugging, and performance analysis. It exposes Chrome DevTools Protocol and Puppeteer capabilities through MCP tools, enabling reliable browser automation, performance profiling, network inspection, and advanced debugging. ## Installation ### MCP Client Configuration Add to your MCP client configuration (e.g., Claude Desktop, Cursor, VS Code): ```json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } } ``` **Slim mode** (basic browser tasks only): ```json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"] } } } ``` **Disable usage statistics and update checks:** ```json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"], "env": { "CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS": "1" } } } } ``` ### CLI Usage (Without MCP) ```bash # Install globally npm install -g chrome-devtools-mcp # Run CLI chrome-devtools-mcp --help ``` ### Requirements - Node.js v20.19+ (latest maintenance LTS) - Chrome stable or newer - npm ## Key MCP Tools Once the MCP server is running, your AI agent has access to these tools: ### Browser Control **`browser_navigate`** - Navigate to a URL ```typescript // Navigate to a page await use_mcp_tool("chrome-devtools", "browser_navigate", { url: "https://example.com" }); ``` **`browser_click`** - Click an element ```typescript // Click by selector await use_mcp_tool("chrome-devtools", "browser_click", { selector: "button.submit" }); // Click with custom wait await use_mcp_tool("chrome-devtools", "browser_click", { selector: "#login-btn", waitUntil: "networkidle2" }); ``` **`browser_type`** - Type text into an input ```typescript // Type into a field await use_mcp_tool("chrome-devtools", "browser_type", { selector: "input[name='email']", text: "user@example.com" }); // Type with delay between keystrokes await use_mcp_tool("chrome-devtools", "browser_type", { selector: "#search", text: "search query", delay: 100 }); ``` **`browser_screenshot`** - Capture screenshot ```typescript // Full page screenshot await use_mcp_tool("chrome-devtools", "browser_screenshot", { fullPage: true }); // Element screenshot await use_mcp_tool("chrome-devtools", "browser_screenshot", { selector: ".main-content", fullPage: false }); ``` **`browser_evaluate`** - Execute JavaScript in browser ```typescript // Get page data await use_mcp_tool("chrome-devtools", "browser_evaluate", { script: "document.title" }); // Interact with page await use_mcp_tool("chrome-devtools", "browser_evaluate", { script: ` const items = Array.from(document.querySelectorAll('.item')); return items.map(el => ({ text: el.textContent, href: el.querySelector('a')?.href })); ` }); ``` ### Performance Analysis **`performance_record`** - Record performance trace ```typescript // Record a page load await use_mcp_tool("chrome-devtools", "performance_record", { url: "https://example.com", duration: 10000, // 10 seconds throttling: "4g" // Simulate 4G network }); ``` **`performance_analyze`** - Analyze performance metrics ```typescript // Get performance insights await use_mcp_tool("chrome-devtools", "performance_analyze", { traceUrl: "trace-data-url", includeFieldData: true // Include CrUX data }); ``` ### Debugging & Inspection **`browser_console`** - Get console messages ```typescript // Fetch console logs await use_mcp_tool("chrome-devtools", "browser_console", {}); ``` **`browser_network`** - Inspect network requests ```typescript // Get network activity await use_mcp_tool("chrome-devtools", "browser_network", {}); // Filter by resource type await use_mcp_tool("chrome-devtools", "browser_network", { resourceType: "xhr" }); ``` **`browser_cookies`** - Manage cookies ```typescript // Get all cookies await use_mcp_tool("chrome-devtools", "browser_cookies", { action: "get" }); // Set a cookie await use_mcp_tool("chrome-devtools", "browser_cookies", { action: "set", name: "session_id", value: "abc123", domain: "example.com" }); // Delete cookies await use_mcp_tool("chrome-devtools", "browser_cookies", { action: "delete", name: "session_id" }); ``` ## Common Automation Patterns ### Form Submission Testing ```typescript // Navigate to login page await use_mcp_tool("chrome-devtools", "browser_navigate", { url: "https://app.example.com/login" }); // Fill in credentials await use_mcp_tool("chrome-devtools", "browser_type", { selector: "input[name='email']", text: "test@example.com" }); await use_mcp_tool("chrome-devtools", "browser_type", { selector: "input[name='password']", text: process.env.TEST_PASSWORD }); // Submit form await use_mcp_tool("chrome-devtools", "browser_click", { selector: "button[type='submit']", waitUntil: "networkidle0" }); // Verify success const result = await use_mcp_tool("chrome-devtools", "browser_evaluate", { script: "document.querySelector('.success-message')?.textContent" }); ``` ### Web Scraping ```typescript // Navigate to page await use_mcp_tool("chrome-devtools", "browser_navigate", { url: "https://news.example.com" }); // Extract data const articles = await use_mcp_tool("chrome-devtools", "browser_evaluate", { script: ` Array.from(document.querySelectorAll('article')).map(article => ({ title: article.querySelector('h2')?.textContent?.trim(), link: article.querySelector('a')?.href, date: article.querySelector('time')?.getAttribute('datetime'), summary: article.querySelector('p')?.textContent?.trim() })) ` }); ``` ### Performance Audit ```typescript // Record trace with throttling const trace = await use_mcp_tool("chrome-devtools", "performance_record", { url: "https://example.com", duration: 15000, throttling: "3g", deviceEmulation: "mobile" }); // Analyze metrics const analysis = await use_mcp_tool("chrome-devtools", "performance_analyze", { traceUrl: trace.url, includeFieldData: true }); // Check Core Web Vitals console.log(`LCP: ${analysis.lcp}ms`); console.log(`FID: ${analysis.fid}ms`); console.log(`CLS: ${analysis.cls}`); ``` ### Network Monitoring ```typescript // Navigate and monitor network await use_mcp_tool("chrome-devtools", "browser_navigate", { url: "https://api.example.com/dashboard" }); // Get network requests const requests = await use_mcp_tool("chrome-devtools", "browser_network", {}); // Filter failed requests const failed = requests.filter(r => r.status >= 400); // Find slow requests const slow = requests.filter(r => r.time > 1000); ``` ### Screenshot Comparison ```typescript // Baseline screenshot await use_mcp_tool("chrome-devtools", "browser_navigate", { url: "https://example.com" }); const baseline = await use_mcp_tool("chrome-devtools", "browser_screenshot", { fullPage: true }); // Make changes via evaluate await use_mcp_tool("chrome-devtools", "browser_evaluate", { script: "document.body.classList.add('dark-mode')" }); // Comparison screenshot const comparison = await use_mcp_tool("chrome-devtools", "browser_screenshot", { fullPage: true }); ``` ### Console Error Debugging ```typescript // Navigate to page await use_mcp_tool("chrome-devtools", "browser_navigate", { url: "https://app.example.com" }); // Check console for errors const console = await use_mcp_tool("chrome-devtools", "browser_console", {}); // Filter errors with source maps const errors = console.filter(msg => msg.type === 'error' && msg.stackTrace ); // Log error details errors.forEach(error => { console.log(`Error: ${error.text}`); console.log(`Source: ${error.stackTrace?.[0]?.url}`); console.log(`Line: ${error.stackTrace?.[0]?.lineNumber}`); }); ``` ## Configuration Options ### Command-Line Flags ```bash # Run in headless mode npx chrome-devtools-mcp@latest --headless # Slim mode (basic tools only) npx chrome-devtools-mcp@latest --slim # Disable performance CrUX data npx chrome-devtools-mcp@latest --no-performance-crux # Disable usage statistics npx chrome-devtools-mcp@latest --no-usage-statistics # Connect to existing browser npx chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222 # Custom Chrome path npx chrome-devtools-mcp@latest --chrome-path=/path/to/chrome ``` ### Environment Variables ```bash # Disable usage statistics export CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1 # Disable update checks export CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1 # CI mode (disables stats collection) export CI=true ``` ### MCP Server Configuration Examples **Headless with custom timeout:** ```json { "mcpServers": {