Browserbase Skills 实战指南：让 Claude Code 自动浏览网页、抓取数据和执行测试
AI 编程助手能写代码，但碰到需要”打开浏览器看看这个页面怎么回事”的时候，只能干瞪眼。Claude Code 虽然能读文件、跑命令，但让它去访问一个需要登录的网站、抓取需要 JS 渲染的页面，它本质上还是一行 curl，啥也干不了。
Browserbase Skills 就是为了解决这个问题的。它是一套专门给 Claude Code 用的插件系统，装上之后，你的 AI Agent 就有了一个真正的浏览器——能点击、能填表、能截图、能绕过反爬检测的那种。
一句话说清楚它是什么
Browserbase Skills 是 Browserbase 公司开源的一套 Claude Code 技能包（GitHub: browserbase/skills），包含 13 个专门化的 skill，覆盖了网页浏览、数据抓取、UI 测试、验证码处理、性能追踪等场景。装上之后，Claude Code 就能像真人一样操作浏览器，而且本地和云端环境切换只需一条命令。
目前项目在 GitHub 上有 2100+ Star，增长很快。
安装：一条命令搞定
npx skills add browserbase/skills
然后安装依赖的 CLI 工具：
npm install -g @browserbasehq/cli npm install -g @browserbasehq/browse-cli
安装完成后，重启 Claude Code，就能直接使用了。如果你想用云端远程浏览器（带反爬和代理），需要注册一个 Browserbase 账号，免费套餐每月 60 分钟，够玩很久。
也可以在 Claude Code 里通过插件市场安装：
/plugin marketplace add browserbase/skills /plugin install browse@browserbase --scope local
如果你用的是 OpenClaw，可以直接从 ClawHub 安装：
clawhub install browse openclaw browserbase setup
13 个 Skill 怎么用
安装后，Claude Code 会自动根据你的意图选择合适的 skill。核心的 4 个是：
browser —— 最核心的浏览器自动化。通过 browse CLI 打开网页、获取无障碍树快照、点击元素、填写表单。支持截图和会话管理。
fetch —— 轻量级页面抓取。不启动完整浏览器，直接抓 HTML 或 JSON，适合快速获取静态内容、检查状态码和响应头。
search —— 网页搜索。返回结构化的搜索结果（标题、URL、元数据），不需要开浏览器。
browserbase-cli —— 平台管理。使用官方 bb CLI 管理 Browserbase Functions、会话、项目、上下文等。
进阶的 9 个更强大：
functions —— 把浏览器自动化部署为 Serverless 函数，可以定时运行或通过 webhook 触发。
site-debugger —— 自动化调试神器。分析失败的浏览器自动化任务，检查反爬检测、选择器、时序、认证和验证码问题，生成测试过的站点 playbook。
browser-trace —— 性能追踪。抓完整的 DevTools Protocol 追踪数据（CDP firehose、截图、DOM dump），按页面分桶，方便排查性能问题。
cookie-sync —— 把本地 Chrome 的 cookies 同步到 Browserbase 持久化上下文，让远程会话也能访问需要登录的网站。
autobrowse —— 最惊艳的一个。自改进浏览器自动化循环：内部 agent 负责浏览，外部 agent 读取执行轨迹、分析哪里出了问题，然后改进策略，反复迭代直到稳定通过。
ui-test —— AI 驱动的对抗性 UI 测试。分析 git diff 来针对性测试变更部分，或者全面探索应用找 bug。
safe-browser —— 构建安全的本地浏览器 agent，只允许访问指定域名。
company-research 和 event-prospecting —— 企业信息研究和活动发现，适合做市场调研。
实战场景
场景一：让 Claude Code 帮你 debug 前端页面
帮我看一下 http://localhost:3000/dashboard 这个页面，登录表单的提交按钮好像没反应，帮我排查一下
Claude Code 会启动浏览器，打开页面，获取 DOM 快照，检查按钮的事件绑定和表单状态，然后给出诊断和建议。
场景二：抓取需要 JS 渲染的动态内容
去 Hacker News 首页，把 Top 10 帖子的标题和链接整理成一个表格
Claude Code 会打开 news.ycombinator.com，获取页面结构，提取标题和链接，返回结构化数据。
场景三：执行端到端测试
分析一下我最近 git diff 改了哪些 UI 组件，然后自动测试这些变更，看看有没有引入 bug
ui-test skill 会自动分析 git diff，确定受影响的 UI 组件，然后打开浏览器执行针对性测试。
本地 vs 云端：什么时候切远程
Browserbase Skills 的一个大亮点是本地和远程浏览器无缝切换。默认用本地 Chrome，速度快、不需要 API key。切换远程只需一条命令：
browse env remote
本地模式适合：本地开发调试、访问公开文档网站、不需要绕过反爬的场景。三种模式可选：
browse env local # 干净的隔离浏览器 browse env local --auto-connect # 复用已有 Chrome（保留登录状态） browse env local <CDP端口> # 连接到指定 CDP 端口
远程模式适合：目标网站有反爬检测、需要验证码自动解决、需要用住宅代理访问地域限制内容、需要保持登录会话。Browserbase 云端提供：
- 自定义 Chromium 构建，内置反指纹
- 自动解决 reCAPTCHA、hCaptcha、Turnstile
- 覆盖 201 个国家的住宅代理
- 会话持久化（cookies 和认证状态）
切换回本地也很简单：
browse env local --auto-connect
AutoBrowse：让浏览器自动化学会自己变强
这是整个 Skills 体系里最有意思的部分。传统的浏览器自动化脚本有一个通病——网站更新了，脚本就挂了。AutoBrowse 的思路是让 AI 自己迭代优化。
工作流程是这样的：
- 你给一个任务，比如「在 Google Flights 上搜北京到东京的机票」
- 内部 agent 启动浏览器，按照当前策略执行
- 执行过程被完整记录（截图、DOM 快照、每一步的操作）
- 外部 agent 分析轨迹，找出失败原因——「下拉菜单的选项有动画，需要等 1 秒才能点击」
- 外部 agent 更新策略文件，加入这个发现
- 重新执行，直到连续 3 次中有 2 次成功
成功后，这个任务会被「毕业」为一个独立的 skill，安装到 ~/.claude/skills/ 下，变成一个永久可复用的自动化能力。
默认迭代 5 轮，支持多任务并行执行。
几个实用技巧
善用 --auto-connect。如果你日常用的 Chrome 已经登录了各种网站，browse env local --auto-connect 可以直接复用这些登录状态，省去每次手动登录的麻烦。
用 cookie-sync 把本地状态同步到云端。当本地能访问某网站但远程被拦截时，先用 cookie-sync 把 cookies 从本地 Chrome 同步到 Browserbase 的持久化上下文，再切到远程模式。
出错了用 site-debugger 而非手动排查。遇到反爬或选择器失效时，直接让 Claude Code 调用 site-debugger skill，它会自动诊断问题类型（反爬、时序、选择器、认证），并生成一份带修复建议的站点 playbook。
调试期间先用本地模式。本地模式不要钱也不消耗 API 额度，只有在需要绕过反爬或访问境外网站时才切远程。
AutoBrowse 适合高频重复任务。像定期抓取数据、定时检查页面可用性这种场景，让 AutoBrowse 自己迭代出一个稳定的 skill，后续就是零维护成本。
总结
Browserbase Skills 本质上做了一件很朴素的事：把真实的浏览器能力塞进了 AI 编程 agent 的工具箱。对于经常需要跟网页打交道的开发者来说——不管是调试前端、抓取数据、还是跑端到端测试——这套工具让 Claude Code 从「只能看代码」变成了「能操作真实的网页」。
GitHub 地址：browserbase/skills