Chrome DevTools (MCP) for Your AI Agent
Give your AI coding agent browser superpowers. Connect Chrome DevTools via MCP to enable real-time page inspection, console reading, and visual debugging.
What Is the DevTools MCP Server?
Chrome DevTools MCP server is an official tool from the Chrome team that exposes browser debugging capabilities to AI coding agents via the Model Context Protocol.
When connected, your AI agent can:
- Read console output — see errors, warnings, and logs in real-time
- Inspect DOM elements — understand page structure and CSS properties
- Monitor network requests — see API calls, response codes, and payloads
- Take screenshots — capture the current page state for visual debugging
- Execute JavaScript — run diagnostic scripts in the browser context
This turns your AI coding agent into a full-stack debugger. Instead of describing a bug ('the button doesn't work'), you can say 'check the console for errors and inspect the click handler on the submit button.'
Setting Up the Connection
Connect Chrome DevTools to your AI agent in under 5 minutes.
Install the DevTools MCP server
The Chrome team provides an official MCP server package. Install it globally or as a project dependency: `npx @anthropic-ai/chrome-devtools-mcp@latest`. This starts a local server that bridges Chrome and your AI agent.
Launch Chrome with debugging enabled
Start Chrome with the remote debugging port enabled: `google-chrome --remote-debugging-port=9222`. On macOS: `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222`. This allows the MCP server to connect.
Configure your AI agent
Add the DevTools MCP server to your agent's configuration (Cursor settings, Claude Code config, etc.). Point it to the local MCP server URL. Your agent now has access to Chrome DevTools commands.
Verify the connection
Ask your AI agent to 'take a screenshot of the current page' or 'read the console logs.' If it returns results, the connection is working. You're ready to debug with AI assistance.
Debugging Workflows
Console Error Diagnosis
Tell your agent: 'Check the browser console for errors.' The agent reads the console output, identifies the error, traces it to the source code, and proposes a fix — all without you copying and pasting error messages.
Visual Regression Detection
After making CSS changes, ask: 'Take a screenshot and compare the layout to the expected design.' The agent captures the current state and can identify visual regressions or layout issues.
Network Request Debugging
For API issues: 'Monitor the network requests when I click Submit and tell me what's failing.' The agent watches network traffic, identifies failing requests, and examines response payloads.
Performance Profiling
Ask: 'Profile the page load and identify the slowest resources.' The agent uses DevTools performance APIs to measure load times and suggest optimizations.
Advanced Use Cases
End-to-end testing assistance: Your agent can navigate pages, fill forms, click buttons, and verify results — essentially performing manual QA with DevTools access.
Accessibility auditing: The agent runs Lighthouse accessibility checks via DevTools and generates a report with specific fix recommendations tied to your source code.
Cross-browser debugging: While this MCP server is Chrome-specific, the workflow pattern extends to other browsers with similar debugging protocols.
Live coding feedback loop: The tightest debugging loop possible — code in your editor, see the result in Chrome, let the agent read any errors, and fix them immediately. No context-switching between tools.
