AI 让帮你操控网页——chrome-devtools-mcp vs agent-browser，哪个更适合你

你好，我是码哥，今天分享一个超强的 MCP，玩法有很多，比如自动化测试

“你将学到

• 安装 chrome-devtools-mcp，让 Claude Code 能直接控制你的 Chrome 浏览器
• 安装 agent-browser，用命令行让 AI Agent 做更复杂的自动化任务
• 搞清楚两者的区别——什么场景用哪个，不再瞎试
• 知道 AI 操作网页的安全边界，哪些操作要格外小心

适合人群：装好了 Claude Code，对"让 AI 帮我点按钮、填表、截图"这件事好奇的你。

一、你有没有做过这种"体力活"

每次复盘竞品，你要依次打开 5 个竞争对手的官网，截图，粘贴到 PPT，写注释，重复 5 次。

每次填同类报销表，表里有 10 个字段，你有 30 条报销记录，填完手指都酸了。

每次检查一个产品在不同设备上的显示效果，你打开手机、平板、浏览器来回切，截了一堆图，找不到哪张是哪里来的。

这些事情不难，但很烦。你知道理论上 AI 可以帮你做，但不知道从哪里下手。

今天这一讲，我们把这件事彻底搞清楚。

有两个工具可以让 AI 帮你操作网页：chrome-devtools-mcp 和 agent-browser。它们都是 2026 年真实在用的成熟工具，但设计目标不同，适合的场景也不一样。

这一讲的核心问题就是：你现在有一个具体的网页任务，该选哪个工具？

读完你会知道答案，而且你能立刻装好其中一个，自己跑一遍。

（需要前置知识：第 8 讲里我们装了第一个 MCP。如果你还没读过，先去补一下，本讲的安装步骤直接从那里衔接。）

二、让 AI"看见"网页，到底意味着什么

在解释这两个工具之前，先说清楚一个更根本的问题：AI 是怎么操作网页的？

你平时用 Claude Code，是在终端里和它对话。Claude Code 能读文件、写代码、跑命令，但它天生看不见你的浏览器——那个打开网页的窗口，对它来说是一个黑盒。

所以，要让 AI 帮你操作网页，你需要给它装一个"桥"——让 Claude Code 能和浏览器"说话"。

类比一下：你家里有一台洗碗机，但厨房里没有供水接口。洗碗机再好用也没法用。chrome-devtools-mcp 和 agent-browser，就是给 Claude Code 接上"供水接口"——一个接口通向你现在开着的 Chrome，另一个接口通向一个专门供 AI 控制的独立浏览器。

两种接法，各有适合的厨房。

这个痛点根源，在于大多数 AI 工具的训练数据里没有"操作网页"这个实时能力——它们能谈论网页，但看不见网页、摸不到网页。这就是为什么加了 chrome-devtools-mcp 或 agent-browser 之后，Claude Code 的能力会突然跃升一个台阶。

AI 操作网页的两种接法

AI 操作网页的两种接法

三、chrome-devtools-mcp：接管你现在开着的 Chrome

它是什么

chrome-devtools-mcp 是 Chrome 官方团队（ChromeDevTools 组织）在 GitHub 维护的开源工具，截至 2026-05-22，最新版是 v1.0.1。

一句话说清楚：它是一个 MCP 服务，把 Chrome 浏览器的"开发者工具"能力，变成 Claude Code 可以调用的工具。

你平时按 F12 打开的那个面板——查看控制台报错、看网络请求、截图、分析性能——chrome-devtools-mcp 就是把这些能力全部开放给了 Claude Code。Claude Code 不再需要你手动打开开发者工具，它自己就能直接查看控制台、截图、点按钮、填表单。

这个工具有 45+ 个具体功能，覆盖了：

• 截图和页面快照
• 点击、拖拽、填表单、键盘输入
• 查看控制台日志、网络请求
• Lighthouse 性能审计
• 内存快照和性能追踪

安装（3 步，5 分钟内）

方法一：通过 Claude Code 插件市场安装（推荐）

这是最完整的安装方式，除了 MCP 本身，还会附带一套排查问题用的 Skill：

claude plugin marketplace add ChromeDevTools/chrome-devtools-mcp
claude plugin install chrome-devtools-mcp

安装完重启 Claude Code。

方法二：直接添加 MCP（手动配置）

如果你更习惯手动管理 MCP，可以在 Claude Code 的 MCP 配置文件里加上：

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

这种方法不包含附带的 Skill，但功能上是一样的。

启用 --autoConnect（关键一步）

安装完之后，需要让 chrome-devtools-mcp 能自动找到你已经开着的 Chrome，而不是每次都要手动设置：

在安装目录找到 plugin.json 配置文件，在命令参数里加上 --autoConnect 旗标。

{
    "name": "chrome-devtools-mcp",
    "version": "0.21.0",
    "mcpServers": {
      "chrome-devtools": {
        "command": "npx",
        "args": [
          "chrome-devtools-mcp@latest",
          "--autoConnect"        // ← 新增这行
        ]
      }
    }
  }

chrome-devtools-mcp-autoconnect

chrome-devtools-mcp-autoconnect

image-20260524151041094

image-20260524151041094

开启 Chrome 远程调试

打开 Chrome，导航到 chrome://inspect/#remote-debugging，勾选"Enable remote debugging"，允许权限提示。

image-20260524151420947

image-20260524151420947

然后重启 Claude Code，在对话里输入"列出所有打开的标签页"——如果 Chrome DevTools MCP 连接成功，Claude Code 会告诉你你现在开着哪些网页。

系统要求：Chrome 144 及以上版本，Node.js LTS，npm。

实际用起来是什么感觉

装好之后，你可以在 Claude Code 里这样说：

“"帮我打开 example.com，截一张完整页面的图，然后告诉我这个页面的主标题和副标题是什么。"

Claude Code 会：

1. 调用 navigate_page 打开网页
2. 调用 take_screenshot 截图
3. 读取截图内容，提取文字

这一套动作，过去你要自己开浏览器、截图、上传、问 AI，现在 Claude Code 自己做完了。

竞品监控场景：

“"帮我依次访问这 5 个竞品网站的定价页，每个截一张图，然后整理出一个对比表——产品名、定价区间、是否有免费版。"

Claude Code 会依次访问、截图、提取信息，最后输出一张对比表。过去这个任务要花你 30 分钟，现在你只需要等几分钟。

原理讲完了，怎么真正用起来？我们来跑一遍。

四、实战：用 chrome-devtools-mcp 搭一个网页操作机器人

这是本讲的核心案例：网页操作机器人（这个案例以后还会在第 22 讲里用到）。

我们用一个真实场景来走一遍：定期检查竞品网站的首页，截图保存，生成一份"本周变化记录"。

4.1 准备工作

确认 chrome-devtools-mcp 已经按上一节的步骤装好，Claude Code 能列出你的 Chrome 标签页。

在你的工作目录建一个文件夹，比如 competitor-monitor/。

4.2 让 AI 帮你截图

在 Claude Code 里说：

“"帮我打开 https://linear.app，等页面加载完成后，截一张完整的首页截图，保存到 ./competitor-monitor/linear-homepage.png，然后告诉我这个页面上的核心卖点是什么（主标题和几个核心功能描述）。"

Claude Code 会执行这几步：

→ navigate_page: https://linear.app
→ wait_for: networkidle
→ take_screenshot: full page
→ 分析截图内容
→ 输出核心信息

预期输出（Claude Code 实际回复示例）：

已截取 linear.app 首页截图并保存到 ./competitor-monitor/linear-homepage.png

页面核心信息：
- 主标题：The issue tracker built for modern software teams
- 副标题：Linear helps streamline software projects, sprints, tasks, and 
  bug tracking.
- 核心功能：Issues / Cycles / Projects / Views

image-20260524151525990

image-20260524151525990

你们操作一遍， 自动截图

4.3 让 AI 帮你填表单

这个能力更有意思。假设你经常要填同一类表单（比如出差申请、费用报销），内容格式类似，只有几个字段不同：

在 Claude Code 里说：

“"帮我打开 [表单页面 URL]，把以下信息填进去：

• 出差地点：上海
• 出行日期：2026-06-01 到 2026-06-03
• 出行目的：参加产品发布会 填完之后截图给我确认，不要提交。"

Claude Code 会依次调用 fill 工具填写字段，截图让你确认，等你说"提交"才会点提交按钮。

重要提示：第 5 节会专门讲安全边界，在你自动化表单之前一定要读一下。

4.4 让 AI 帮你抓取关键信息

有时候你不需要截图，只需要提取页面上的文字：

“"帮我打开这个产品的 changelog 页面，把最近 3 个版本更新的标题和日期提取出来，整理成一个列表。"

Claude Code 会调用 take_snapshot 获取页面 DOM 结构，从中提取你需要的信息，比截图更精准。

原理讲完了，但生产环境完全是另一回事。

五、agent-browser：给 AI 一个专属的独立浏览器

它是什么，为什么不同

agent-browser 是 Vercel Labs 用 Rust 写的一个命令行工具，截至 2026-05-22，最新版是 v0.27.0。

它和 chrome-devtools-mcp 的根本区别在于：chrome-devtools-mcp 接管你正在用的 Chrome；agent-browser 给 AI 一个专属的独立浏览器。

继续用厨房的类比：chrome-devtools-mcp 相当于让 AI 用你的厨房做菜——方便，但 AI 在你厨房里翻东西，你会不安；agent-browser 相当于给 AI 配了一间独立的小厨房——AI 在那里做什么都不影响你。

这个设计差异带来了几个实际区别：

安装 agent-browser

第一步：安装 CLI 工具

# macOS 用户（推荐）
brew install agent-browser

# 或者用 npm
npm install -g agent-browser

第二步：让它下载专属的 Chrome

agent-browser install

这一步会下载一个 "Chrome for Testing" 的独立副本，专门给 AI 用，不会动你平时用的 Chrome。

第三步：给 Claude Code 装上对应的 Skill

npx skills add vercel-labs/agent-browser

这会在 ~/.claude/skills/agent-browser/ 里安装一个 Skill stub，Claude Code 之后用到 agent-browser 时会自动知道怎么调用它。

装完之后，你在 Claude Code 里说"帮我用 agent-browser 打开某个网页"，Claude Code 就知道该调用哪个命令了。

什么情况下 agent-browser 更合适

场景 1：批量任务

你有 50 个表单要填，每个内容不同。agent-browser 支持并发多个 Session，Claude Code 可以同时开几个浏览器实例分别填写，最后汇总结果。用 chrome-devtools-mcp 做同样的事，多个任务会排队，慢很多。

场景 2：不想让 AI 碰你的真实登录态

你的 Chrome 里存着公司系统的登录状态、个人账号密码。用 chrome-devtools-mcp 时，Claude Code 理论上可以读取到这些信息（见第 5 节安全讨论）。agent-browser 开一个全新的空白浏览器，跟你的真实账号完全隔离。

场景 3：需要精确截图对比（视觉回归测试）

你改了一个 UI，想确认改动没有引入其他地方的显示问题。agent-browser 内置了 diff 命令，可以截两张图然后高亮显示差异像素。这是 chrome-devtools-mcp 没有的功能。

场景 4：AI 做的事情可能影响你的账号

点"删除"、"提交订单"、"发帖"这类不可逆操作，你不会想让 AI 用你的真实 Chrome 来做。agent-browser 给你一个沙盒环境，AI 的误操作不会影响到你的真实账号。

demo 跑通了，但生产环境完全是另一回事——安全这件事，必须在实际用之前搞清楚。

六、安全边界：这几件事要格外小心

AI 帮你操作网页，是一件强大但需要边界的事。

我见过有人第一次用 chrome-devtools-mcp，随手让 Claude Code"帮我整理一下我的 Gmail 邮件"，结果 Claude Code 发现 Chrome 里已经登录了 Gmail，真的开始移动邮件……

这不是工具的问题，是边界没想清楚。

要特别谨慎的几类操作

1. 支付操作

"帮我完成这笔支付" — 不要。任何涉及真实资金的操作，AI 做到填好表单就停，最后点"确认支付"必须是你自己来。

2. 不可逆操作

删除文件、注销账号、清空购物车、发送邮件、发布内容——这些操作做了就难以撤回。让 AI 做到"准备好了"，你来做最后一步。

3. 用你真实登录态的操作

如果你要让 AI 操作一个你登录着的网站（比如公司 OA 系统），强烈建议用 agent-browser 而不是 chrome-devtools-mcp，用一个专属的隔离浏览器，不要复用你日常的 Chrome。

4. 开放远程调试端口

chrome-devtools-mcp 的工作原理，是通过 Chrome 的远程调试功能连接浏览器。默认情况下，这个端口只对本机开放（localhost）。

绝对不要做的事：把 --remote-debugging-address 设成 0.0.0.0（让网络上其他人也能访问）。这相当于把你的浏览器完全暴露在网络上。

5. 在含敏感数据的 Chrome 上运行 chrome-devtools-mcp

如果你的 Chrome 存着银行账户、公司内网账号、密钥等重要信息，建议用一个单独的 Chrome 用户配置（Profile）来运行 chrome-devtools-mcp 的任务，而不是用你日常用的那个。

安全边界矩阵

安全边界矩阵

那些可以放心让 AI 做的事

说了这么多谨慎的，也说说放心让 AI 做的事：

• 只读操作：截图、提取文本、读取页面信息——AI 看，不改
• 预填表单但不提交：AI 填好，你审核后自己点提交
• 在空白隔离浏览器里的操作：用 agent-browser 开一个不含任何登录态的浏览器做任何事
• 访问公开网站：竞品研究、行情监控、内容抓取——只要是公开信息，都没问题
• 测试环境的操作：在测试环境里怎么折腾都行，反正不影响真实数据

故事讲完了，今天到底学到了什么？

七、课后小结

今天这一讲，我们把 AI 帮你操作网页这件事从"听说可以"升级到了"知道怎么做"。

如果你只能记住三件事，记住这三件：

1. chrome-devtools-mcp 接管你的 Chrome，5 分钟装好，适合日常截图和调试；agent-browser 给 AI 一个独立浏览器，适合批量任务和需要隔离的操作。
2. 日常的只读任务（截图、抓取、监控），选 chrome-devtools-mcp 就够了；涉及登录态、不可逆操作、或者需要并行的场景，选 agent-browser 更安全。
3. AI 操作网页不等于 AI 可以乱来——任何涉及资金、数据删除、账号操作的最后一步，必须你自己来做。

这一讲的"网页操作机器人"案例，在第 22 讲我们会再次用到——到时候我们会把今天这个单次执行的任务，升级成一个可以每周自动跑的定时监控工作流。今天你装好的工具，就是那一讲的基础。

今天就先到这里。

如果你按步骤装好了 chrome-devtools-mcp，欢迎在评论区分享你让 AI 帮你做的第一个网页任务——不管是截了哪个网页的图，还是让 AI 抓了什么数据，听起来都有意思。

下一讲见。

八、思考题

题 1（动手题）：装好 chrome-devtools-mcp 之后，让 Claude Code 打开你最常用的一个工作网站，截一张完整页面的图，然后问 Claude Code："这个页面上最重要的三条信息是什么？"把 Claude Code 的回答截图发到评论区——看看 AI 和你判断的"重要信息"是否一致。

题 2（判断题）：假设你要让 AI 帮你填一份公司内网的报销表（需要登录公司系统），你会选择 chrome-devtools-mcp 还是 agent-browser？为什么？（提示：思考登录态隔离的问题）

题 3（进阶题）：chrome-devtools-mcp 和 agent-browser 能不能同时装、同时用？想想有没有一个工作流，可以先用一个、再用另一个，把两者的优点都利用上。