chrome-devtools-mcp

概述

这个 MCP 服务器将 Claude 与 Chrome DevTools Protocol 连接起来，使开发者能够通过自然对话直接调试网页应用。它具有网络监控、控制台集成、性能指标、页面检查和存储访问等功能。该服务器可以轻松安装为 Claude Desktop 扩展程序，或手动配置用于从 API 调试到性能分析的多种用途。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

• start_chrome_and_connect

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

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

  Connect to an existing Chrome instance

  试试:Connect to the already running Chrome browser试试:Connect to Chrome on port 9222
• get_network_requests

  Get HTTP network requests with optional filtering

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

  Retrieve browser console logs with optional filtering

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

  Execute JavaScript code in the browser context

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

  Get comprehensive page metrics and performance data

  试试:Show me the page load performance metrics试试:Get information about the current page
• get_document

  Retrieve the DOM document structure

  试试:Get the full HTML structure of the page试试:Show me the document structure
• query_selector

  Find a single DOM element by CSS selector

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

  Get browser cookies with optional domain filtering

  试试:Show me all cookies in the browser试试:Get cookies for example.com domain
• get_console_error_summary

  Get an organized summary of JavaScript errors and warnings

  试试:Show me all JavaScript errors on the page试试:Get a summary of console errors
• get_performance_metrics

  Get detailed performance metrics and resource timing data

  试试:Analyze the page performance metrics试试:Show me the resource loading times
• inspect_console_object

  Deep inspect any JavaScript object in the browser

  试试:Inspect the window object试试:Show me the properties of my React app state

可对比工具

安装

{
  "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

如何连接到我的网页应用？

使用一键命令：`start_chrome_and_connect("localhost:3000")`，将 URL 替换为您的应用地址。

我能监控网络请求吗？

是的，使用 `get_network_requests()` 查看所有 HTTP 流量，并可选择按域名或状态代码进行过滤。

Hacker News 讨论

开发者社区最近的相关讨论。

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

chrome-devtools-mcp 对比