3个最好的浏览器自动化Skill，让AI全自动修复WEB前端BUG

zrong(Jacky) — Mon, 20 Apr 2026 18:06:08 +0800

经常有群友问我：Coding 过程中，怎么把测试和编码都自动化起来？

看看你的 Coding 流程，是不是还在用下面这种方式和 AI 沟通：

Coding 之后，手动调试。
把后端 log 发给 Agent。
在前端控制台里复制 log 内容发给 Agent。
Agent 调整完成后，再重复上面的 1 到 3 步。

这个流程其实挺低效。

让 Agent 读取后端 log 其实很方便。你只要在 AGENTS.md 或 CLAUDE.md 里把后端 log 的获取方式写清楚，Agent 就会自己去拿。比如下面这样：

当然，后台管理不是本文重点。本文着重讨论曾老师日常在 Web 前端开发里使用的浏览器自动化工具。有了这些工具，你就能把 Agent 真正接进完整的自动化 Coding 流程里。

下面按我的使用频率，来介绍这 3 个主力工具，最后再补一个常备的 Playwright。

Agent Browser

这是曾老师用得最多的 skill。GitHub 上已经有 30k star，主要用 Rust 编写，项目地址：

https://github.com/vercel-labs/agent-browser

建议安装到全局（macOS）：

1brew install agent-browser
2agent-browser install  # 下载 Chrome for Testing，只需要执行一次

将 Agent 使用的 skill 安装到全局：

1npx skills add vercel-labs/agent-browser@agent-browser -g

Agent Browser 可以读取 DOM 和控制台信息，在开发过程中模拟开发者执行点击、拖动等操作。

有了上面的能力，Agent 基本就能代替你去做调试了。只要把通过条件设清楚，理论上它会一直干到功能完成。

Agent Browser 相对于其它工具最大的优势，就是快。后面我讲其它工具时还会再提这点。

chrome-devtools-mcp

这是 Google 官方提供的 Chrome MCP 工具，主要用 TypeScript 编写，GitHub 上已经有 36.4k star，项目地址：

https://github.com/ChromeDevTools/chrome-devtools-mcp

由于这是 Google 官方提供的工具，理论上你可以用它来做任何事。

但有一些限制让我很不爽：

必须开一个临时的 profile。
如果退出了某个 Agent session，这个 session 里打开的 Chrome 进程也会被 kill。
默认情况下，只有一个 session 能控制一个 Chrome 进程。
默认情况下，无法连接已经存在的 Chrome 进程。

例如，在 macOS 上，需要先创建一个新的 Chrome 实例，再连接到临时 profile：

1/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

另一个让我挺不爽的问题是：速度太慢了。

不知道是不是因为用了 MCP 协议。跟 Agent Browser 对比着用的时候，曾老师总觉得 chrome-devtools-mcp 慢了半拍。当然，也可能只是因为 Claude Code 被限速了……

Browser Use

早期曾老师挺常用这个工具。它主要用 Python 编写，GitHub 上已经有 88.9k star，项目地址：

https://github.com/browser-use/browser-use

建议安装到全局环境中（uv 是 Python 的现代包管理器）：

1uv tool add browser-use
2browser-use install # 安装 Chromium 浏览器（只需一次）

安装 Agent 使用的 skill 到全局：

1npx skills add browser-use/browser-use@browser-use -g

和 Agent Browser 类似，Browser Use 本身也是个独立的工具，可以在命令行中独立运行。

你可以借助大模型的力量，让 Browser Use 帮你做各种事……当然，也可以在 Claude Code、Codex 等任意 Agent 里使用。

在运行过程中，Browser Use 会贴心地把浏览器 DOM 里的内容标注清楚，方便你在和 Agent 对话时描述位置。（虽然曾老师觉得这件事没那么必要。）

注意，在日常开发里，你其实不用提这么具体的要求。我这里写得细一点，只是为了行文方便。你只要给出一个需要验证的结果，大模型会自己去想该怎么点击。

当然，Browser Use 能做的远不止前端开发。你也可以用它来自动化日常工作，比如登录带验证码的网站、买机票之类的事情……

Playwright

Playwright 是微软开源的一套 Web 自动化工具，做的事情和前面几个工具类似。GitHub 上已经有 86.9k star。

https://github.com/microsoft/playwright

曾老师日常会用 Playwright 做完整的自动化测试。但只要涉及模拟操作网页，还是更常用上面那 3 个。严格说，Playwright 更像自动化测试基座，不完全算前面那类给 Agent 用的浏览器操作工具，所以我把它放在最后单独说。

Web 自动化小结

下面几张图是 Codex 帮曾老师画的。讲真，跟曾老师自己画的比，还是差那么一点点。算了，凑合用吧……

使用场景

flowchart TD Start["我现在要做什么？"] Debug["前端调试
看 Console / Network / Performance"] Test["写稳定测试 / CI / 跨浏览器自动化"] FastOps["让 Agent 快速打开网页、点击、填表、截图"] Platform["做更完整的 Browser Agent 平台能力
Cloud / Profile / Remote Browser / Agent SDK"] CDM["chrome-devtools-mcp"] PW["Playwright"] AB["agent-browser"] BU["browser-use"] Start --> Debug Start --> Test Start --> FastOps Start --> Platform Debug --> CDM Test --> PW FastOps --> AB Platform --> BU AB -. "也能做部分调试，但不是强项" .-> Debug BU -. "也能做网页操作，但更偏平台层" .-> FastOps PW -. "也能直接脚本化调试页面" .-> Debug CDM -. "可做基础自动化，但核心价值是调试观察" .-> FastOps

选型表格

block-beta columns 5 h0["能力"] h1["Playwright"] h2["chrome-devtools-mcp"] h3["agent-browser"] h4["browser-use"] r1["调试 / 可观测性"] r1a["中\n可脚本调试，但不是主场"] r1b["强\nConsole / Network / Performance"] r1c["中\n有 console/errors/snapshot"] r1d["中\n可观察，但不如 DevTools 专精"] r2["测试 / CI"] r2a["强\n最成熟的测试框架"] r2b["弱\n不是测试框架"] r2c["弱\n偏操作型 CLI"] r2d["中\n能自动化，但非传统测试主力"] r3["跨浏览器"] r3a["强\nChromium / Firefox / WebKit"] r3b["弱\n主要面向 Chrome"] r3c["弱\n主要走 Chrome/CDP"] r3d["弱\n重点不在跨浏览器"] r4["Agent 友好度"] r4a["中\n可用但更偏工程脚本"] r4b["中\n通过 MCP 接给 Agent"] r4c["强\nsnapshot + @ref 很适合 Agent"] r4d["强\nCLI / SDK / Agent workflow"] r5["云 / 远程浏览器"] r5a["中\n可 connect_over_cdp"] r5b["弱\n核心不是浏览器基础设施"] r5c["中\n支持 provider / CDP 连接"] r5d["强\nCloud / Remote Browser 是强项"] r6["登录态 / Profile 复用"] r6a["中\n可保存 storage state"] r6b["弱\n不以此为主"] r6c["中\nprofile / session-name / auto-connect"] r6d["强\nprofile / auth / sync 体系更完整"] classDef header fill:#1f2937,stroke:#111827,color:#fff; classDef rowhead fill:#e5e7eb,stroke:#9ca3af,color:#111827; classDef strong fill:#dcfce7,stroke:#22c55e,color:#14532d; classDef medium fill:#fef3c7,stroke:#f59e0b,color:#92400e; classDef weak fill:#fee2e2,stroke:#ef4444,color:#991b1b; class h0,h1,h2,h3,h4 header class r1,r2,r3,r4,r5,r6 rowhead class r1b,r2a,r3a,r4c,r4d,r5d,r6d strong class r1a,r1c,r1d,r2d,r4a,r4b,r5a,r5c,r6a,r6c medium class r2b,r2c,r3b,r3c,r3d,r5b,r6b weak

关系

graph TD CDP["CDP / Chrome DevTools Protocol"] PW["Playwright"] CDM["chrome-devtools-mcp"] BU["browser-use"] AB["agent-browser"] Agent["AI Agent / Codex / Claude / Cursor"] Chrome["Chrome / Chromium"] Cloud["Cloud Browser / Remote Browser"] CDP --> Chrome PW --> Chrome PW -. "可通过 connect_over_cdp 接入" .-> CDP CDM --> CDP CDM --> Chrome CDM -. "把 DevTools 能力暴露为 MCP tools" .-> Agent AB --> CDP AB --> Chrome AB -. "CLI + snapshot/@eN refs" .-> Agent BU --> CDP BU --> Chrome BU --> Cloud BU -. "CLI / SDK / Agent Platform" .-> Agent PW -. "可接入 browser-use 提供的云浏览器" .-> BU classDef proto fill:#f5f5f5,stroke:#666,color:#111; classDef tool fill:#e8f1ff,stroke:#4a78c2,color:#111; classDef platform fill:#eaf7ea,stroke:#4f8a4f,color:#111; class CDP proto; class PW,CDM,AB tool; class BU platform;

最重要的总结

什么？你说曾老师数学不行，介绍了四个工具？

怎么，买三送一。 你还不乐意了？

Ai-Skill on ZRONG's BLOG