在本文中，你将了解：

Chrome DevTools for 智能体（chrome-devtools-mcp）为 AI 控制的浏览器自动化带来了哪些功能。
它有哪些局限性，以及 Bright Data 的 Browser API 如何解决这些问题。
如何将你偏好的 AI 智能体（例如 Gemini CLI、Claude Code 等）连接到 chrome-devtools-mcp并通过 Browser API 控制远程浏览器。

让我们开始吧！

什么是 Chrome DevTools for 智能体？

chrome-devtools-mcp 也称为“面向智能体的 Chrome DevTools”，它是一款开源 MCP 服务器，可让 AI 编程智能体通过 CDP（Chrome DevTools Protocol）控制基于 Chromium 的浏览器。

具体来说，它允许 AI 智能体浏览页面、与网页元素交互、检查网络请求、执行 JavaScript、截取屏幕截图、调试浏览器问题并分析性能。在底层，它将 Chrome DevTools 功能公开为 MCP 工具，AI 编程智能体可以使用这些工具自动操作和检查浏览器会话。

该项目在 GitHub 上以 Apache 2.0 许可证开源，并已获得超过 5.2 万颗 GitHub Star。

`chrome-devtools-mcp` 当前的局限性及其解决方法

chrome-devtools-mcp 是一款用于控制浏览器会话的强大工具，尤其适合调试和性能分析。但与此同时，它仍面临一些浏览器自动化中的常见挑战：

封锁：网站可以检测自动化浏览器会话，并通过验证码、错误或其他限制进行响应，从而中断你的工作流程。这是因为该技术会以无头模式启动全新的 Chrome 会话。这类会话的浏览历史和用户上下文有限，因此网站更容易将其识别为自动化操作。此外，普通用户使用的是启用了 GUI 的浏览器，而不是无头模式。
资源消耗：在本地运行多个标签页或浏览器实例可能会消耗大量系统资源。单个 Chrome 标签页就可能占用数百 MB RAM，因此大规模并发自动化会给本地基础设施带来很大压力。

这些限制会影响浏览器自动化的可靠性和可扩展性，尤其是在企业级工作负载中。理想的配置应让 chrome-devtools-mcp 能够控制专为大规模自动化而设计且配备反机器人功能的云浏览器。这正是 Bright Data Browser API 所提供的解决方案。

Bright Data Browser API：解决方案

Bright Data Browser API 将浏览器执行从你的本地计算机迁移至专为规模化运行而构建的全托管云基础设施，从而解决 chrome-devtools-mcp 的局限性。

你无需在本地运行和维护浏览器，而是可以通过 CDP 端点将面向智能体的 Chrome DevTools 连接到 Browser API。Browser API 提供预配置的云浏览器会话，并具备代理轮换、验证码破解和高级浏览器指纹处理等功能。

重要提示：Browser API 可通过 Bright Data 免费套餐使用，每月包含 5,000 个免费积分。

该服务由 Bright Data 的代理基础设施提供支持，其住宅网络包含超过 4 亿个 IP。它支持全球地理位置定位和无限并发浏览器会话，同时提供 99.99% 的正常运行时间和 99.95% 的成功率。

如何将面向智能体的 Chrome DevTools 与 Bright Data Browser API 集成

在本章中，你将了解如何在 AI 智能体中配置 chrome-devtools-mcp。你将对其进行配置，使其能够通过 Bright Data Browser API 连接到具有隐蔽性且可无限扩展的云浏览器会话。

注意：本节重点介绍 Gemini CLI。你可以将相同步骤应用于其他 AI 智能体框架例如 Claude Code、OpenAI Codex、OpenCode 等。

请按照以下说明操作！

前提条件

开始之前，请确保你已具备：

已在本地安装 Gemini CLI。
一个 Bright Data 账户。

如果你对 MCP 的工作原理以及面向智能体的 Chrome DevTools 所公开的工具有一些基本了解，将会很有帮助。

第 1 步：设置 Bright Data Browser API

首先，获取 Bright Data Browser API 基于 CDP 的远程连接 URL。

如果尚未注册，请创建 Bright Data 账户。如果已有账户，请登录以访问控制面板。

接下来，从左侧菜单中选择“Web Access > Web Access API”选项：

如果“我的 API”表中已有 Browser API 条目（即下图所示的“browser_api”条目），请进入该 API 页面：

否则，单击“创建 API”按钮上的下拉菜单，然后选择“Browser API”：

这将打开 Browser API 设置向导。为你的 Browser API 命名，并根据你的需求进行配置：

完成后，单击“添加 API”以创建 Browser API。然后打开其详情页面：

在此页面的“Puppeteer / Playwright”下，你可以找到基于 CDP 的集成连接详情。Browser API WebSocket CDP URL 遵循以下格式：

wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222

要显示 Browser API 密码，请单击密码旁边的“显示”。输入通过电子邮件收到的多重身份验证代码。

现在，你已经获得了配置 chrome-devtools-mcp 以远程控制浏览器所需的 CDP 连接 URL。太棒了！

第 2 步：通过 `chrome-devtools-mcp` 在 Gemini CLI 中配置 Browser API

将 chrome-devtools-mcp 集成到你的 AI 智能体中，同时指示它通过 Bright Data Browser API 控制远程防检测浏览器会话。在 Gemini CLI 中，可以使用以下命令实现：

gemini mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latest -- --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'

注意：请务必将 wsEndpoint 参数中的占位符替换为你实际的 Browser API CDP 连接 URL。

在终端中，你将看到一条消息，提示已添加 chrome-devtools MCP 服务器：

请注意以下事项：

--scope project 会在你的项目中本地配置 MCP 服务器。如果要全局配置 MCP 服务器，请移除此选项。
--wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222' 会指示 chrome-devtools-mcp 连接到 Bright Data Browser API 端点。

注意：在这里使用 wsEndpoint 参数非常重要。chrome-devtools-mcp 文档提到wsEndpoint 是 browserUrl 的替代方案。但是，如果你通过 browserUrl 提供 Browser API CDP URL，集成将失败并显示以下错误：“无法根据包含凭据的 URL 构造请求”。

该命令会在你的项目文件夹中生成一个包含以下配置的 .gemini/settings.json 文件：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222"
      ]
    }
  }
}

你也可以手动创建此文件。

补充说明：你还可以在你偏好的 AI 智能体中配置 chrome-devtools-mcp。例如，在 Claude Code 中运行：

claude mcp add chrome-devtools --scope project -- npx -- -y chrome-devtools-mcp@latest --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'

太棒了！你的 AI 智能体现在应该能够通过 MCP 使用面向智能体的 Chrome DevTools 工具，并且已配置为连接 Browser API 提供的远程浏览器会话。

第 3 步：检查集成是否正常运行

在项目文件夹中启动 Gemini CLI（或你偏好的 AI 智能体）：

gemini

然后运行 /mcp 命令，查看可用的 MCP 服务器：

你应该会看到 chrome-devtools MCP 服务器及其 29 个可用工具，包括：

工具	说明
`navigate_page`	导航至 URL、重新加载页面，或在浏览器历史记录中后退和前进。
`click`	单击通过页面快照识别的元素，并可选择支持双击。
`fill`	在输入框或文本区域中输入文本，或从下拉菜单中选择选项。
`fill_form`	在一次操作中填写多个表单字段、复选框、单选按钮和下拉选择框。
`press_key`	按下键盘按键或组合键，以执行快捷操作、导航以及其他输入工具无法完成的交互。
`type_text`	通过模拟键盘操作，在之前获得焦点的输入框中输入文本。
`hover`	将指针移动到页面元素上，适用于触发基于悬停的菜单或交互。
`wait_for`	等待指定文本出现在页面上，然后再继续执行后续操作。
`list_pages`	列出当前打开的所有浏览器页面及其标识符，以供后续交互使用。
`new_page`	打开新的浏览器标签页并导航至指定 URL。
`take_snapshot`	捕获页面的无障碍树，公开元素及其唯一标识符，以供后续交互使用。
`evaluate_script`	在页面内执行 JavaScript，并从浏览器上下文返回可序列化为 JSON 的结果。
`list_network_requests`	列出页面最近发出的网络请求，并可选择按资源类型进行筛选。
`get_network_request`	检查特定网络请求，包括其标头、请求正文和响应数据。
`take_screenshot`	截取当前页面、视口、完整页面或特定元素的屏幕截图。

非常好！这证实 chrome-devtools-mcp 已正确配置，并且其浏览器自动化工具可供你的 AI 智能体使用。

最后一步是验证它能否使用这些工具，通过 Bright Data Browser API 与远程浏览器会话交互。

第 4 步：测试面向智能体的 Chrome DevTools + Browser API

要检查面向智能体的 Chrome DevTools 能否控制已配置的 Browser API 会话，请使用受反机器人措施保护的复杂网站进行测试，例如 Booking.com。

使用如下真实任务来测试此集成：

Open the Booking.com page in a browser and search for hotels in Barcelona for two people from September 23 to 24. Apply the "4-star" filter and sort the results by lowest price. Extract the first 10 results with the hotel name, nightly price, rating, and review count.

执行该提示词后，你应该会看到以下结果：

具体来说，Gemini CLI 智能体通过以下方式处理了该任务：

调用 navigate_page 访问 Booking.com。
使用 list_pages 工具识别可用的浏览器页面。
结合使用 click 和 take_snapshot 工具查找相关元素，并选择所需日期。
使用 evaluate_script 执行其他必要交互并进入目标结果页面。
再次使用 take_snapshot 检查结果页面的结构。
使用 evaluate_script 通过自定义 JavaScript 脚本提取所需数据。
以表格形式返回提取的数据。

以下是该智能体生成的输出：

请注意，获取的数据与 Booking.com 上直接显示的结果高度一致：

这个简单示例表明，通过 MCP 连接至 Gemini CLI 的面向智能体的 Chrome DevTools，可以使用远程 Browser API 会话与 Booking.com 交互。

Booking.com 是一个实用的测试案例，因为它的反机器人保护会增加浏览器自动化的难度。在此配置中，Browser API 负责处理浏览器会话以及访问该网站所需的基础设施，而 chrome-devtools-mcp 则为 AI 智能体提供与浏览器交互所需的工具。

最终，你将获得一个能够执行复杂浏览器交互的 AI 智能体，而无需在本地运行和管理浏览器。任务完成！

其他可行示例

chrome-devtools-mcp 与 Bright Data Browser API 的组合还可支持许多其他浏览器自动化、调试和数据提取用例。

以下是一些可用于不同场景的提示词：

交互后从网络请求中提取数据：Open a website, search for "web scraping," inspect the network requests generated when the results load, identify the request returning the search results, and extract the first 20 results from its response.
检查 API 响应：Open a product page, identify the network request returning its product data, inspect the request and response, and extract the product name, price, availability, and rating.
分析页面性能：Open a website and analyze its performance. Report the page load time, largest contentful paint, cumulative layout shift, and other relevant performance metrics, then identify potential bottlenecks.
调试 JavaScript 错误：Open a website, inspect the console for JavaScript errors and warnings, identify the affected scripts or pages, and explain the most likely causes based on the available debugging information.

通过 chrome-devtools-mcp你的智能体不仅限于单击链接和读取页面内容。它还可以执行控制台检查、性能分析、网络监控等操作。与 Playwright MCP 等解决方案相比，这使其更适合需要深入检查和调试浏览器的用例。