Chrome DevTools MCP

Name: Chrome DevTools MCP
Author: dinesh-nalla-se

by dinesh-nalla-se

Give your AI agent full access to Chrome DevTools

browser Node.js Beginner Self-hostable No API key Verified Featured

📅 Updated: 1w ago

View on GitHub View package

Description

Chrome DevTools MCP bridges the gap between AI coding assistants and the browser, exposing the full power of Chrome DevTools Protocol through a clean MCP interface. Instead of manually copying console errors or describing layout issues to your AI, this server lets the model directly navigate pages, inspect network traffic, capture screenshots, and run JavaScript in the browser context. The real strength lies in its debugging and performance profiling capabilities. Your AI assistant can start and stop performance traces, read console logs in real time, and inspect network requests — all without you leaving your editor. This turns what used to be a tedious back-and-forth into a single conversation where the AI can see exactly what you see in the browser. Built and maintained by Anthropic, Chrome DevTools MCP is designed to be lightweight and focused. It connects to a running Chrome instance via the DevTools Protocol, which means it works with your actual browser session including cookies, extensions, and authenticated state. This makes it particularly effective for debugging issues that only appear in specific user contexts.

✅ Best for

Front-end developers who want their AI assistant to see and interact with the browser during debugging sessions

⏭️ Skip if

You need headless browser automation for testing or scraping — Playwright MCP is a better fit for those workflows

💡 Use cases

Debugging front-end rendering issues by letting the AI take screenshots and inspect the DOM directly
Profiling page performance bottlenecks with automated trace capture and analysis
Monitoring network requests and console errors during development without switching windows

👍 Pros

✓ Direct access to the real Chrome DevTools Protocol, not a simulated environment
✓ Works with your authenticated browser sessions, cookies, and extensions
✓ Performance tracing support gives the AI deep insight into rendering and load times

👎 Cons

✗ Requires a running Chrome instance with remote debugging enabled
✗ Not suited for headless CI/CD pipelines — use Playwright MCP for that

🔧 Exposed tools (14 tools)

Tool	Category	Description
take_screenshot	debugging	Capture a screenshot of the current browser viewport
get_console_logs	debugging	Retrieve console log messages from the browser developer tools
evaluate_javascript	debugging	Execute arbitrary JavaScript code in the browser page context
get_network_requests	debugging	List captured network requests including URLs, methods, and status codes
click	input automation	Click on a page element identified by a CSS selector
type_text	input automation	Type text into a focused input field or editable element
scroll	input automation	Scroll the page by a specified amount or to a specific element
hover	input automation	Move the mouse pointer over an element to trigger hover states
select_option	input automation	Select an option from a dropdown or select element
navigate	navigation	Navigate to a specified URL in the connected Chrome browser
get_page_content	navigation	Extract the full HTML or text content of the current page
wait_for_selector	navigation	Wait until a specific CSS selector appears in the DOM before proceeding
performance_start_trace	performance	Start recording a Chrome performance trace for profiling
performance_stop_trace	performance	Stop the active performance trace and return the collected profiling data

⚡ Installation

Prerequisites:

• Node.js

claude mcp add chrome-devtools -- npx @anthropic-ai/chrome-devtools-mcp@latest

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/chrome-devtools-mcp@latest"]
    }
  }
}

💡 Tips & tricks

Launch Chrome with the `--remote-debugging-port=9222` flag to enable the DevTools Protocol connection. If you keep a dedicated Chrome profile for development, the AI can access all your logged-in sessions and local storage state, making it much easier to reproduce authenticated bugs. Combine with a filesystem MCP to let the AI edit code and immediately verify changes in the browser.

🔄 Alternatives

Playwright MCP

Headless browser automation for your AI assistant

Simpler for basic web automation and scraping

Quick info

Author: dinesh-nalla-se
License
Runtime: Node.js
Transport: stdio
Category: browser
Difficulty: Beginner
Self-hostable: ✅
API key: No API key needed
Docker: —
Version: 0.10.2
Updated: Feb 10, 2026

Client compatibility

✅ Claude Code
✅ Cursor
✅ VS Code Copilot
✅ Gemini CLI
✅ Windsurf
✅ Cline
✅ JetBrains AI
✅ Warp

Platforms

🍎 macOS 🐧 Linux 🪟 Windows