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

适用于智能体的 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 步骤中或在应用设置中安装 Chrome 开发者工具插件。如需了解详情,请参阅Antigravity 浏览器 子智能体文档

使用 CLI 进行安装

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

如果您的智能体未在此处列出,您可以在适用于智能体的 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.

高级配置

以下是智能体访问浏览器的其他一些方式。

配置无头模式

如果您想在没有可见浏览器窗口的情况下执行后台任务,可以在无头(无界面)模式下运行 Chrome。将 --headless 标志添加到服务器实参:

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

连接到现有浏览器会话

默认情况下,适用于智能体的 Chrome 开发者工具会启动新的 Chrome 实例。不过,您可以使用 --autoConnect 标志将智能体连接到现有浏览器会话。如果您的智能体需要调查登录或您已开始的会话后面的问题,这会特别有用。

您可以通过两种方式连接到现有会话:

使用自动连接 (Chrome 144+)

当 Chrome 开发者工具 MCP 服务器配置了 --autoConnect 选项时,MCP 服务器将连接到有效的 Chrome 实例并请求远程调试会话。

  1. 在运行的 Chrome 浏览器中,前往 chrome://inspect/#remote-debugging 以启用远程调试。
  2. 更新 MCP 配置以添加 --autoConnect 标志:

    {
      "mcpServers": {
        "chrome-devtools": {
          "command": "npx",
          "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
        }
      }
    }
    
  3. 向智能体发出提示。Chrome 将显示一个对话框,要求用户授予权限以允许远程调试会话。点击允许

使用远程调试端口手动连接

如果您无法使用 --autoConnect(例如,如果您在沙盒环境中运行智能体),则可以使用调试端口手动启动 Chrome。 以下是一个示例(在 macOS 上):

  1. 启动 Chrome 浏览器并启用远程调试端口。出于安全原因,您还必须指定自定义用户数据目录。

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
    
  2. 将智能体配置为使用 --browser-url 参数进行连接:

    {
      "mcpServers": {
        "chrome-devtools": {
          "command": "npx",
          "args": [
            "chrome-devtools-mcp@latest",
            "--browser-url=http://127.0.0.1:9222"
          ]
        }
      }
    }