Chrome DevTools MCP：让AI智能体控制和检测Chrome浏览器

Chrome DevTools MCP是一个开源工具，它充当一个服务器，允许AI编程助手（例如Gemini、Claude或Copilot）直接控制和检查正在运行的谷歌Chrome浏览器。 这个工具解决了AI编程助手的一个核心问题：它们可以编写代码，但无法看到代码在浏览器中的实际运行情况，就像蒙着眼睛编程一样。 通过使用模型-上下文-协议（MCP），该工具将AI助手与强大的Chrome开发者工具连接起来，使AI能够执行自动化操作、进行深度调试和性能分析。 这意味着AI不仅能生成代码，还能在真实环境中测试、检查和修复代码，根据实际的浏览器数据提出修改建议，而不仅仅是猜测。 开发者可以通过简单的npx命令来运行它，并将其配置到支持的AI客户端中。

功能列表

• 性能分析: 使用Chrome开发者工具记录网页的性能轨迹，并提取可操作的改进见解。
• 浏览器调试: 能够分析网络请求、读取浏览器控制台信息、执行JavaScript脚本，以及对网页进行截图。
• 可靠的自动化: 基于Puppeteer库来自动化控制Chrome浏览器，例如模拟用户点击、填写表单和页面导航，并能自动等待操作完成。
• 设备模拟: 支持模拟不同的中央处理器（CPU）性能和网络条件，方便测试网页在不同环境下的表现。
• 多客户端支持: 可以与多种AI编程助手客户端集成，如Claude、Cursor、VS Code中的Copilot以及Gemini等。

使用帮助

Chrome DevTools MCP作为一个模型-上下文-协议（MCP）服务器，为AI编程助手提供了控制Chrome浏览器的能力。 以下是安装和使用该工具的详细流程。

环境要求

在开始之前，请确保你的系统满足以下条件：

• Node.js 22 或更新版本。
• Chrome 浏览器稳定版或更新版本。
• npm 包管理器。

安装与启动

最简单的安装和运行方式是通过npx命令，这个命令可以获取最新的软件包并执行它。你需要在支持MCP的AI客户端中添加以下配置：

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

使用chrome-devtools-mcp@latest可以确保你的AI客户端始终使用最新版本的服务。

针对不同AI客户端的配置

1. Claude Code
   使用Claude Code的命令行工具添加MCP服务器：

   claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
   

2. Copilot / VS Code
   遵循MCP的安装指南，在VS Code中添加上述标准配置。你也可以使用VS Code的命令行工具来安装：

   code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'
   

3. Cursor
   • 快速安装: 在Cursor软件中点击”Install in Cursor”按钮进行安装。
   • 手动安装:
     1. 进入Cursor的 Settings -> MCP。
     2. 点击 New MCP Server。
     3. 将上文提供的标准JSON配置粘贴进去。
4. Gemini CLI 或 Gemini Code Assist
   遵循其官方的MCP配置指南，并使用上面提供的标准JSON配置。

核心功能操作

当服务器配置好后，你的AI编程助手就可以调用一系列工具来操作浏览器。这些工具是预设好的命令，AI会根据你的自然语言指令来选择并执行它们。

• 页面导航与操作
  你可以让AI“打开一个新的页面并访问特定网址”，AI会调用new_page和navigate_page工具。你还可以让它“列出所有打开的标签页”(list_pages)或“关闭当前页面”(close_page)。
• 模拟用户输入
  你可以指示AI“点击页面上某个按钮”(click)或者“在一个输入框里填入文字”(fill)。这些操作依赖Puppeteer实现，能够可靠地模拟真实用户行为。
• 性能分析
  这是一个核心功能。你可以要求AI“分析当前页面的加载性能”。AI会依次执行以下操作：
  1. 调用 performance_start_trace 工具开始记录性能轨迹。
  2. 刷新页面或执行指定操作。
  3. 调用 performance_stop_trace 结束记录。
  4. 调用 performance_analyze_insight 分析收集到的数据，并以自然语言形式向你报告性能瓶颈和优化建议。
• 调试
  如果你遇到程序错误，可以请求AI“检查浏览器控制台里有什么错误信息”，AI会使用list_console_messages工具来获取日志。 你还可以让它“执行一段脚本来获取某个数据”(evaluate_script)或“截取当前页面的图片”(take_screenshot)以供分析。

高级配置

你可以在args数组中添加命令行参数，来进一步定制服务器的行为。例如，以无头模式（不显示浏览器界面）并在独立的临时配置下运行：

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

以下是一些常用的配置参数：

• --headless: 在无UI的模式下运行Chrome。
• --isolated: 每次运行时创建一个临时的用户数据目录，浏览器关闭后会自动清理。
• --channel: 指定使用的Chrome版本通道，如canary、beta或dev。
• --browserUrl: 连接到一个已经通过端口转发在运行的Chrome实例。

要查看所有可用的配置选项，你可以在终端运行 npx chrome-devtools-mcp@latest --help。

应用场景

1. 自动化前端性能分析
   AI智能体可以自动打开指定的网页，开始性能追踪，执行一系列用户操作，然后停止追踪并分析结果，最后以人类可读的语言生成性能报告和优化建议。
2. 自动化的Web应用调试
   当发现网站功能异常时，开发者可以指令AI智能体复现操作，并检查控制台的错误日志、查看网络请求的失败情况，或者执行特定的JavaScript代码来诊断问题根源。
3. 回归测试与UI验证
   AI智能体可以根据预设的流程自动访问网页、填写表单、点击按钮，并通过截图对比来验证界面是否和预期一致，从而实现自动化的UI回归测试。
4. Web数据抓取与处理
   通过编程方式控制浏览器，AI智能体可以导航到目标页面，提取DOM中的信息，处理数据，并将结果返回给用户，用于简单的数据抓取任务。

QA

1. 什么是MCP？
   MCP是“模型-上下文-协议”（Model Context Protocol）的缩写。它是一个开放标准，用于连接像Gemini或Claude这样的大语言模型（LLM）与外部工具和服务。 Chrome DevTools MCP就是一个实现了该协议的服务端，它充当了AI和Chrome开发者工具之间的“适配器”。
2. 这个工具安全吗？需要注意什么？
   该工具会向AI客户端暴露浏览器实例的内容，允许AI检查、调试甚至修改浏览器中的任何数据。因此，在使用过程中应避免打开或操作含有敏感或个人信息的网页，以防信息泄露给AI客户端。
3. 为什么在某些客户端中启动会失败？
   一些AI客户端（如支持macOS Seatbelt或Linux容器的客户端）会在一个沙盒环境中运行MCP服务器。由于Chrome浏览器启动时需要创建自己的沙盒，这会导致权限冲突而启动失败。解决方法是在AI客户端中禁用对Chrome DevTools MCP的沙盒限制，或者手动在外部启动一个Chrome实例，然后使用--browserUrl参数让服务器去连接它。