Control and inspect live Chrome browser instances from Google Antigravity. Debug web applications, capture screenshots, analyze network traffic, and interact with the DOM using AI-powered browser automation.
# Chrome DevTools MCP Server for Google Antigravity The Chrome DevTools MCP Server provides direct integration between Google Antigravity and Chrome browser instances through the Chrome DevTools Protocol (CDP). This enables AI-powered debugging, testing, and web automation workflows. ## Why Use Chrome DevTools MCP? Chrome DevTools is the industry standard for web development and debugging. This MCP server brings those capabilities directly into your AI-assisted development workflow: - **Live Debugging**: Inspect and debug web applications in real-time - **DOM Manipulation**: Query, modify, and interact with page elements - **Network Analysis**: Monitor requests, responses, and performance metrics - **Console Access**: Execute JavaScript and capture console output - **Screenshot Capture**: Take full-page or element-specific screenshots - **Performance Profiling**: Analyze rendering, scripting, and memory usage ## Key Features ### Page Navigation and Control - Navigate to URLs and manage browser history - Handle page loads, redirects, and errors - Control viewport size and device emulation - Manage multiple tabs and windows ### DOM Inspection and Manipulation - Query elements using CSS selectors or XPath - Get and set element attributes, text, and HTML - Click, type, and interact with form elements - Wait for elements to appear or conditions to be met ### Network Monitoring - Capture all network requests and responses - Filter by resource type (XHR, fetch, images, scripts) - Inspect headers, cookies, and payloads - Measure timing and performance metrics ### JavaScript Execution - Execute arbitrary JavaScript in page context - Evaluate expressions and get return values - Access and modify page variables and state - Handle async operations and promises ### Screenshot and PDF Generation - Capture full-page screenshots - Screenshot specific elements or regions - Generate PDF documents from pages - Configure image quality and format ## Configuration ```json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["@anthropic/chrome-devtools-mcp"], "env": { "CHROME_PATH": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", "HEADLESS": "false", "DEFAULT_VIEWPORT_WIDTH": "1280", "DEFAULT_VIEWPORT_HEIGHT": "720" } } } } ``` ## Common Use Cases ### Automated Testing Ask Antigravity: "Navigate to our login page, fill in the test credentials, submit the form, and verify the dashboard loads correctly" ### Visual Regression Testing Ask Antigravity: "Take screenshots of the homepage at mobile, tablet, and desktop breakpoints and compare with baseline images" ### Performance Auditing Ask Antigravity: "Analyze the network waterfall for our product page and identify the slowest loading resources" ### Web Scraping and Data Extraction Ask Antigravity: "Extract all product names, prices, and images from this e-commerce category page" ### Debugging Session Replay Ask Antigravity: "Open the staging site, reproduce the bug by clicking the checkout button twice, and capture the console errors" ## Best Practices 1. **Headless vs Headed**: Use headless mode for CI/CD, headed mode for debugging 2. **Wait Strategies**: Always wait for elements before interacting to avoid flaky tests 3. **Error Handling**: Implement proper error handling for navigation failures 4. **Resource Cleanup**: Close browser instances when done to free memory 5. **Security**: Never expose CDP ports to untrusted networks ## Integration with Development Workflow The Chrome DevTools MCP works seamlessly with other development tools: - **Playwright/Puppeteer**: Use alongside existing automation scripts - **Lighthouse**: Integrate performance auditing into your workflow - **React DevTools**: Debug React component state and props - **Network Throttling**: Test under slow network conditions ## Security Considerations - CDP provides full browser control - use in trusted environments only - Avoid exposing remote debugging ports on production systems - Sanitize any user-provided URLs before navigation - Be cautious with credential handling in automation scripts The Chrome DevTools MCP Server transforms browser debugging from a manual process into an AI-assisted workflow, making web development faster and more efficient.
{
"mcpServers": {
"chrome-devtools": {
"mcpServers": {
"chrome-devtools": {
"args": [
"@anthropic/chrome-devtools-mcp"
],
"command": "npx"
}
}
}
}
}