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

Matthias Rohmer
José Luis Zapata

面向智能体的 Chrome 开发者工具是一套工具，可将 Chrome 开发者工具的强大功能引入 AI 编码工作流。安装面向智能体的 Chrome 开发者工具后，您将可以访问：

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

例如，智能体可以使用这些工具记录和评估性能跟踪记录，以分析网站的性能并找出潜在的改进之处。除了 Web 开发之外，面向智能体的 Chrome 开发者工具还允许智能体浏览实时 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 步骤中或在应用设置中安装 DevTools 插件。如需了解详情，请查看 Antigravity 浏览器 子智能体文档。

使用 CLI 安装

如需设置面向智能体的 Chrome 开发者工具，您可以使用 JSON 配置文件或 CLI 命令直接安装服务器（如果您的智能体支持）。某些智能体还提供官方扩展程序或插件，其中包含智能体技能，这些专家级说明可帮助您的智能体使用 DevTools 功能。

如果您的智能体未在此处列出，您可以在面向智能体的 Chrome 开发者工具 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 安装面向智能体的 Chrome 开发者工具。

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

在其他智能体中安装

如需为未列出的智能体进行配置，请参阅 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.

后续步骤

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