chrome-devtools-mcp

Overview

This MCP server bridges Claude with Chrome DevTools Protocol, allowing developers to debug web applications directly through natural conversation. It features network monitoring, console integration, performance metrics, page inspection, and storage access capabilities. The server can be easily installed as a Claude Desktop extension or manually configured for various use cases from API debugging to performance analysis.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

• start_chrome_and_connect

  Start Chrome with debugging enabled and connect to it in one step

  Try:Start Chrome and connect to localhost:3000Try:Launch Chrome with debugging enabled for my React app
• connect_to_browser

  Connect to an existing Chrome instance

  Try:Connect to the already running Chrome browserTry:Connect to Chrome on port 9222
• get_network_requests

  Get HTTP network requests with optional filtering

  Try:Show me all failed network requestsTry:Get network requests from myapi.com
• get_console_logs

  Retrieve browser console logs with optional filtering

  Try:Show me all JavaScript errors in the consoleTry:Get console logs with error level only
• execute_javascript

  Execute JavaScript code in the browser context

  Try:Run console.log('Hello world') in the browserTry:Execute document.querySelector('button').click()
• get_page_info

  Get comprehensive page metrics and performance data

  Try:Show me the page load performance metricsTry:Get information about the current page
• get_document

  Retrieve the DOM document structure

  Try:Get the full HTML structure of the pageTry:Show me the document structure
• query_selector

  Find a single DOM element by CSS selector

  Try:Find the main navigation button on the pageTry:Get the element with id 'submit-button'
• get_cookies

  Get browser cookies with optional domain filtering

  Try:Show me all cookies in the browserTry:Get cookies for example.com domain
• get_console_error_summary

  Get an organized summary of JavaScript errors and warnings

  Try:Show me all JavaScript errors on the pageTry:Get a summary of console errors
• get_performance_metrics

  Get detailed performance metrics and resource timing data

  Try:Analyze the page performance metricsTry:Show me the resource loading times
• inspect_console_object

  Deep inspect any JavaScript object in the browser

  Try:Inspect the window objectTry:Show me the properties of my React app state

Comparable tools

Installation

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "python",
      "args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

mcp install server.py -n "Chrome DevTools MCP" --with-editable .

uv sync
SERVER_PATH="$(pwd)/server.py"
PYTHON_PATH="$(pwd)/.venv/bin/python"
claude mcp add chrome-devtools "$PYTHON_PATH" "$SERVER_PATH" -e CHROME_DEBUG_PORT=9222

FAQ

How do I connect to my web application?

Use the one-step command: `start_chrome_and_connect("localhost:3000")` replacing the URL with your application's address.

Can I monitor network requests?

Yes, use `get_network_requests()` to view all HTTP traffic, with optional filtering by domain or status code.

On Hacker News

Recent discussion from the developer community.

• Show HN: Chrome DevTools MCP Server▲ 1
  Story by benrr · 2025-06-30

Compare chrome-devtools-mcp with