AI导哈

Chrome浏览器自动化工具

Chrome DevTools MCP是一个允许AI编码助手控制和检查实时Chrome浏览器的工具，提供自动化操作、性能分析和深度调试功能。

  • by ChromeDevToolse
  • 本地部署
  • 更新于
在 GitHub 查看 ChromeDevTools/chrome-devtools-mcp

使用说明

Chrome开发工具MCP

chrome-devtools-mcp 让你的编码代理（如Gemini、Claude、Cursor或Copilot） 控制和检查实时Chrome浏览器。它充当模型上下文协议 （MCP）服务器，让您的AI编码助手能够充分利用 Chrome DevTools可实现可靠的自动化、深度调试和性能分析。

主要特点

  • 获取性能见解：用途 铬 开发者工具 录制 跟踪并提取可操作的性能见解。
  • 高级浏览器调试：分析网络请求，截图和 检查浏览器控制台。
  • 可靠的自动化.用途 操纵者 使中的操作自动化 Chrome浏览器会自动等待操作结果。

免责声明

chrome-devtools-mcp 向MCP客户端公开浏览器实例的内容 允许他们检查、调试和修改浏览器或DevTools中的任何数据。 避免共享您不想共享的敏感或个人信息 MCP客户端。

需求

入门

将以下配置添加到MCP客户端：

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

[！注意]
使用 chrome-devtools-mcp@latest 确保您的MCP客户端始终使用最新版本的Chrome DevTools MCP服务器。

MCP客户端配置

Claude Code Use the Claude Code CLI to add the Chrome DevTools MCP server (guide): 
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
Cline Follow https://docs.cline.bot/mcp/configuring-mcp-servers and use the config provided above.
Codex Follow the configure MCP guide using the standard config from above. You can also install the Chrome DevTools MCP server using the Codex CLI: 
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Copilot / VS Code Follow the MCP install guide, with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI: 
code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'
Cursor

单击按钮安装：

或手动安装：

首选 Cursor Settings -> MCP -> New MCP Server.使用上面提供的配置。

Gemini CLI Follow the MCP guide using the standard config from above.
Gemini Code Assist Follow the configure MCP guide using the standard config from above.

您的第一个提示

在MCP客户端中输入以下提示，检查是否一切正常：

Check the performance of https://developers.chrome.com

您的MCP客户端应打开浏览器并记录性能跟踪。

[！注意]
一旦MCP客户端使用需要运行浏览器实例的工具，MCP服务器将自动启动浏览器。单独连接到Chrome DevTools MCP服务器不会自动启动浏览器。

工具

配置

Chrome DevTools MCP服务器支持以下配置选项：

  • --browserUrl, -u 使用端口转发连接到正在运行的Chrome实例。有关更多详细信息，请参阅：https://developer.chrome.com/docs/devtools/remote-debugging/local-server.

    • 类型： 字符串

  • --headless 是否在无头（无UI）模式下运行。

    • 类型： 布尔
    • 违约： false

  • --executablePath, -e 自定义Chrome可执行文件的路径。

    • 类型： 字符串

  • --isolated 如果指定，将创建一个临时用户数据目录，该目录将在浏览器关闭后自动清理。

    • 类型： 布尔
    • 违约： false

  • --channel 指定应使用的其他Chrome频道。默认是稳定频道版本。

    • 类型： 字符串
    • 选择： stable, canary, beta, dev

通过 args JSON配置中的属性。例如：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

你也可以跑步 npx chrome-devtools-mcp@latest --help 查看所有可用的配置选项。

概念

用户数据目录

chrome-devtools-mcp 使用以下用户启动Chrome的稳定频道实例 数据目录：

  • Linux/MacOS： $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
  • 窗口： %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

用户数据目录在运行之间不会被清除，也不会在多个运行之间共享 所有实例 chrome-devtools-mcp.设置 isolated 选择 true 使用临时用户数据目录，该目录将在以下情况下自动清除 浏览器已关闭。

已知限制

操作系统沙盒

一些MCP客户端允许使用macOS安全带或Linux对MCP服务器进行沙盒处理 容器。如果启用了沙盒， chrome-devtools-mcp 无法启动 Chrome需要权限才能创建自己的沙盒。作为一种变通方法， 禁用沙盒 chrome-devtools-mcp 在您的MCP客户端或使用 --connect-url 连接到您在外部手动启动的Chrome实例 MCP客户端沙盒。

相关 MCP