适用于智能体的 Chrome 开发者工具是一套工具,可将 Chrome 开发者工具的强大功能引入到 AI 编码工作流中。安装适用于智能体的 Chrome 开发者工具后,您将可以访问:
- MCP 服务器:使用 开源 模型上下文 协议将 AI 智能体连接到实时浏览器实例。
- Chrome 开发者工具 CLI:一个可直接从浏览器互动 的界面。
- 智能体技能:专家说明,用于教导智能体如何 协调多个工具来执行复杂任务,例如无障碍功能或 性能调试。
在 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 实例并请求远程调试会话。
- 在运行的 Chrome 浏览器中,前往
chrome://inspect/#remote-debugging以启用远程调试。 更新 MCP 配置以添加
--autoConnect标志:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }向智能体发出提示。Chrome 将显示一个对话框,要求用户授予权限以允许远程调试会话。点击允许 。
使用远程调试端口手动连接
如果您无法使用 --autoConnect(例如,如果您在沙盒环境中运行智能体),则可以使用调试端口手动启动 Chrome。
以下是一个示例(在
macOS 上):
启动 Chrome 浏览器并启用远程调试端口。出于安全原因,您还必须指定自定义用户数据目录。
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable将智能体配置为使用
--browser-url参数进行连接:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }