Chrome DevTools MCP 终极跨平台配置指南：Linux、macOS与Windows一键部署

【免费下载链接】chrome-devtools-mcp Chrome DevTools for coding agents 项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp

Chrome DevTools MCP是一个强大的开源工具，让你的AI编程助手能够控制和检查实时Chrome浏览器。作为Model-Context-Protocol（MCP）服务器，它为AI编码助手提供了完整的Chrome DevTools功能，用于可靠的自动化、深度调试和性能分析。😊

🚀 一键安装与快速启动

无论你使用哪种MCP客户端，配置都异常简单。只需在你的MCP客户端配置文件中添加以下内容：

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

系统要求：

• Node.js v20.19或更新的LTS版本
• Chrome当前稳定版或更新版本
• npm包管理器

🔧 跨平台配置详解

Linux系统配置

在Linux系统上，Chrome DevTools MCP服务器使用以下用户数据目录：

$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

macOS系统部署

在macOS上，用户数据目录位置为：

$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

Windows 11专业配置

Windows系统需要特殊配置以确保兼容性。在.codex/config.toml中添加以下参数：

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest"
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

📊 核心功能模块概览

Chrome DevTools MCP提供了丰富的工具集，分为多个功能类别：

输入自动化工具

• 点击操作：click - 在指定元素上执行点击
• 表单填充：fill_form - 同时填充多个表单元素
• 键盘输入：press_key - 支持组合键操作

导航自动化模块

• 页面管理：list_pages - 获取浏览器中打开的页面列表
• 智能等待：wait_for - 等待指定文本出现在页面上

性能分析套件

• 追踪启动：performance_start_trace - 在选定页面上开始性能追踪录制

⚙️ 高级配置选项

Chrome DevTools MCP服务器支持多种配置选项，让你的自动化测试更加灵活：

无头模式配置：

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

🔗 连接运行中的Chrome实例

在某些场景下，你可能希望连接到正在运行的Chrome实例：

自动连接（Chrome 144+）

1. 在Chrome中导航到chrome://inspect/#remote-debugging启用远程调试
2. 配置MCP服务器使用--autoConnect参数

手动连接通过端口转发

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

🛠️ 故障排除与调试

遇到问题时，启用调试日志：

DEBUG=* npx chrome-devtools-mcp@latest --log-file=/path/to/chrome-devtools-mcp.log

常见问题解决方案：

• 模块未找到错误：清理npm缓存或重新安装
• 目标已关闭错误：确保没有其他Chrome实例运行

📈 性能测试实战案例

使用以下提示测试你的配置是否正常工作：

检查 https://developers.chrome.com 的性能

你的MCP客户端应该打开浏览器并记录性能追踪，提供详细的性能报告和优化建议。

Chrome DevTools MCP为开发者和AI助手提供了前所未有的浏览器控制能力，无论是自动化测试、性能分析还是深度调试，都能轻松应对。✨

【免费下载链接】chrome-devtools-mcp Chrome DevTools for coding agents 项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp