开始使用面向代理的 Chrome 开发者工具

面向智能体的 Chrome 开发者工具是一套工具,可将 Chrome 开发者工具的强大功能引入 AI 编码工作流。安装面向智能体的 Chrome 开发者工具后,您将能够使用以下功能:

  • MCP 服务器:使用开源Model Context Protocol将 AI 智能体连接到实时浏览器实例。
  • Chrome 开发者工具 CLI:一种可直接从终端与浏览器互动的界面。
  • 智能体技能:专家级指令,用于教导智能体如何协调使用多种工具来完成复杂任务,例如无障碍功能或性能调试。

在 Web 开发方面,“面向智能体的 Chrome 开发者工具”将调试功能集成到 AI 智能体中。

例如,代理可以使用这些工具记录和评估性能轨迹,以分析网站的性能并找出潜在的改进之处。除了 Web 开发之外,借助面向智能体的开发者工具,智能体还可以浏览实时网页,而不仅仅是检索静态 HTML。

设置

本指南将向您展示如何设置面向智能体的 Chrome 开发者工具,以帮助您的编码智能体控制和检查实时 Chrome 浏览器。

使用 chrome-devtools-mcp 软件包通过编码智能体(例如 Gemini、Claude、Cursor 或 Copilot)控制和检查实时 Chrome 浏览器。请注意,虽然适用于代理的 Chrome 开发者工具提供了一整套工具,但 CLI 仅支持基于 shell 的自动化所需的部分工具。

支持的 IDE 和模型

面向智能体的 Chrome 开发者工具支持任何支持 MCP 协议的工具或 IDE。其中包括 Antigravity、Gemini CLI、Claude Code、Cursor、Copilot 等。

安全注意事项

由于您的代理将能够查看并与它访问的网页互动,因此如果您将其连接到具有有效已验证会话的浏览器,它就可以有效地代表您执行操作。请避免分享您不想与客服人员分享的敏感信息或个人信息。

前提条件

在安装面向智能体的 Chrome 开发者工具之前,请确保您的环境满足以下要求:

如需设置面向智能体的 Chrome 开发者工具,请选择与您的首选编码环境相符的方法。虽然有些代理需要手动安装,但有些工具已预先集成代理。

Antigravity

面向智能体的 Chrome 开发者工具已预先与 Antigravity 2.0 捆绑在一起。您可以立即开始使用它,只需使用浏览器子代理即可。尝试使用斜杠命令,例如:

/browser Navigate to the Google homepage

如需访问专业智能体技能,我们建议您在初始设置的 Build with Google 步骤中或在应用设置中安装开发者工具插件。如需了解详情,请参阅 Antigravity 浏览器子代理文档。

使用 CLI 进行安装

如需为面向智能体的 Chrome 开发者工具进行设置,您可以使用 JSON 配置文件或 CLI 命令直接安装服务器(如果您的智能体支持)。部分代理还提供官方扩展程序或插件,其中包含智能体 skill,即有助于代理使用开发者工具功能的专家指令。

如果您的代理未在此处列出,您可以在 Chrome DevTools for Agents GitHub 代码库中找到有关如何安装该代理的信息。

如需将面向智能体的 Chrome 开发者工具添加到命令行智能体,请使用特定智能体的内置 CLI 命令:

Gemini CLI

使用以下命令安装 Gemini CLI 扩展程序,该扩展程序包含 MCP 软件包和随附的技能:

# Gemini extension (MCP+Skills)
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

使用以下命令仅安装 MCP 软件包:

# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

Claude Code

如需将面向智能体的 Chrome 开发者工具作为 Claude Code 插件安装,请在 Claude Code 中使用以下斜杠命令。添加 Marketplace 注册表:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

然后从 Marketplace 注册表中安装插件:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

如需了解详情,请参阅官方 Chrome 开发者工具 Claude 插件页面。

Codex

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

使用 JSON 配置进行安装

对于支持 mcpServers 配置键的其他代理,请手动添加此条目,并确保通过 npm i chrome-devtools-mcp 安装适用于代理的开发者工具。

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

在其他代理中安装

如需为未列出的代理配置 MCP,请参阅 Chrome 开发者工具 MCP GitHub 代码库。

测试您的设置

在代理中输入以下提示,检查一切是否正常运行:

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

代理应打开浏览器窗口并记录性能轨迹。

排查设置问题

如果您的代理无法运行工具,但有权访问 Chrome 开发者工具技能,则可能会尝试自动修复问题。如果未显示,您可以明确提示代理:

Use the Chrome DevTools troubleshooting skill to fix my setup.

或者,您也可以提出更具体的要求:

I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.

后续步骤

如需自定义设置,请参阅配置。