怎样用 Gemini CLI 和 Chrome DevTools MCP 操作网页

Gemini CLI 能操作 Chrome 吗？

可以，前提是项目配置暴露了对应工具，且模型账号和审批策略允许调用。Gemini CLI 是 MCP 客户端，Chrome DevTools MCP 启动或连接浏览器，负责打开 URL 和读无障碍快照。模型登录与浏览器连接是两件事。终端显示 Connected 之后，还要用一张已知页面核对结果。 一位用户曾报告旧版 Gemini CLI 无法连接 DevTools MCP，同一个服务却能在另一个客户端连接。遇到类似情况，可以先查项目配置和传输。 GitHub #178

官方扩展目录也列出了 Chrome DevTools MCP。本文用显式的项目配置，版本、启动参数和范围都能核对。 Gemini CLI MCP 指南 Chrome DevTools 配置 浏览器中的 Gemini

要点

• 在项目中登记 Chrome DevTools MCP，先使用独立浏览器资料。

• 用 gemini mcp list 查连接，再在 Gemini CLI 里用 /mcp desc 查工具。

• 打开一张已知网页，从工具结果核对最终 URL、主标题和链接。

• 分别核对模型认证、工作区信任和工具审批。

搜索和浏览器操作各能验证什么

搜索结果可找到发布公告，不能说明当前账号或点击后的状态。浏览器快照能确认显示内容，却不会自动判断它是不是最新的官方资料。先明确要验证的事实，再选能返回证据的工具。 搜索与浏览器操作 AI Agent 的职责

在小项目锁定版本

以下是根据官方文档整理的配置示例，固定 Gemini CLI 0.67.0 和 Chrome DevTools MCP 1.12.0，便于对应工具参数。先查服务器对 Node.js 和 Chrome 的要求，保留依赖锁文件。 Chrome DevTools MCP v1.12.0

mkdir browser-mcp-check
cd browser-mcp-check
npm init -y
npm install --save-exact @google/gemini-cli@0.67.0 chrome-devtools-mcp@1.12.0
./node_modules/.bin/gemini --version
./node_modules/.bin/chrome-devtools-mcp --version

将下列条目放进项目的 .gemini/settings.json。将路径替换为本机项目内可执行文件绝对路径；如已有配置，合并服务条目。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "/absolute/path/browser-mcp-check/node_modules/.bin/chrome-devtools-mcp",
      "args": ["--headless", "--isolated", "--no-usage-statistics"],
      "includeTools": ["new_page", "take_snapshot", "list_pages", "close_page"],
      "trust": false
    }
  }
}

includeTools 限定 Gemini CLI 暴露的工具，不限制域名。--isolated 使用临时浏览器资料。先访问自己控制或获准查看的页面。需要复用登录时，单独确认连接方式和会话账号。Google 的 Codelab 使用完整测试应用，初次核对只需已知标题和链接的小页面。 连接现有浏览器 Google UI 测试实验

工作区信任允许 Gemini 加载项目配置。trust: false 让服务器的工具调用仍受当前策略约束。先进入交互模式，收到审批提示时查看服务器名、动作和 URL。ask_user 规则在非交互模式下会拒绝调用。如果环境要求限制可访问网址，在 Chrome DevTools MCP 中单独配置。--allowed-url-pattern 需要 Chrome 149 或更新版本。 Gemini CLI 审批策略 Chrome DevTools MCP 配置

从握手检查到网页快照

在项目目录运行 ./node_modules/.bin/gemini mcp list。受信任工作区可加载项目内的服务器配置。进入 Gemini CLI 交互会话后，运行 /mcp desc 查看可用工具及参数。模型访问单独配置。 Gemini CLI 认证方法

要重复验证，可以在第二个终端进入测试项目并启动一个本地页面。预期主标题为 “MCP browser check”，链接指向 #details。用工具返回的结果核对这两项。

mkdir -p fixture
cat > fixture/index.html <<'HTML'
<!doctype html>
<meta charset="utf-8">
<title>MCP browser check</title>
<h1>MCP browser check</h1>
<a href="#details">Details</a>
<p id="details">Local fixture</p>
HTML
python3 -m http.server 8765 --bind 127.0.0.1 --directory fixture

示例固定的版本要求把 new_page 返回的页 ID 作为 pageId 传给 take_snapshot。网页可能重定向，判断前看实际返回的 URL 和标题。 v1.12.0 工具文档

用 chrome-devtools MCP 打开 http://127.0.0.1:8765/。返回页 ID、最终 URL、主标题和一条预期链接。按打开结果的页 ID 取快照。访问失败时返回工具错误。不要输入凭证、提交表单或修改内容。

根据失败发生在哪一层排查

如果服务无法注册，先核对配置范围、版本和传输。GitHub 上有用户报告旧版 Gemini CLI 连接失败，同一任务在另一客户端可连接。它是历史环境问题，先检查本地参数再判断。另有 Apple Silicon 用户发现 MCP 进程通过 PATH 用了 Intel Node，修正 PATH 后自己的问题解决。先核对真正使用的 Node 和架构。 GitHub 原 issue Reddit 原帖

如果能打开网页但快照报错，检查该版本的工具参数，从打开结果获取页 ID。如果跳到登录页，则暂停并记录需要人工接管。 核对登录会话

保留最小回执

保存 CLI、MCP 和浏览器版本，配置范围、浏览器模式、工具列表、最终 URL、页 ID 和预期结果。记录在哪一步发生了权限批准或失败。再跑时可以定位是哪一层不同。 第一个浏览器任务 按任务选浏览器连接 什么是 Agent 浏览器

如果要在 Gemini CLI 会话中读取 Chrome 的当前状态，先登记项目级服务，再用一张已知网页查通这条路径。之后每多开一项工具，都为它设定可核对的预期结果。

Secholar.L

Tabbit 增长与内容

Secholar.L 专注 AI 浏览器与 Agent 工作流的实操写作,基于真实调研对比工具,引用可验证的一手来源。