字节笔记本
2026年2月22日 · 约 7 分钟读完
Dev Browser：Claude Code 的浏览器自动化利器
本文介绍 Dev Browser，一个专为 Claude Code 设计的浏览器自动化插件。该插件让 Claude 能够控制浏览器进行测试和验证，支持持久化页面状态、灵活的脚本执行和 LLM 友好的 DOM 快照，大幅提升开发效率。
项目简介
Dev Browser 是由 Sawyer Hood 开发的开源项目，为 Claude Code 提供浏览器自动化能力。截至目前，该项目在 GitHub 上已获得 3.6k stars 和 234 forks。它允许 Claude 在开发过程中控制浏览器进行测试和验证工作，填补了 AI 辅助开发中浏览器自动化的空白。
核心特性
- 持久化页面状态：一次导航，跨多个脚本持续交互，无需重复登录或设置
- 灵活执行模式：尽可能执行完整脚本，探索时采用逐步执行，智能平衡效率与准确性
- LLM 友好的 DOM 快照：专为 AI 优化的结构化页面检查，让 Claude 更好地理解页面结构
- Chrome 扩展支持：可选的 Chrome 扩展允许控制现有浏览器，保留登录状态和扩展
技术栈
- TypeScript：主要开发语言
- Playwright：底层浏览器自动化框架
- Node.js：运行时环境（要求 v18+）
- WXT：Chrome 扩展开发框架
安装指南
前置要求
- Claude Code CLI 已安装
- Node.js v18 或更高版本（带 npm）
Claude Code 安装
# 添加插件市场
/plugin marketplace add sawyerhood/dev-browser
# 安装插件
/plugin install dev-browser@sawyerhood/dev-browser安装完成后重启 Claude Code。
Amp / Codex 安装
# 对于 Amp: ~/.claude/skills | 对于 Codex: ~/.codex/skills
SKILLS_DIR=~/.claude/skills # 或 ~/.codex/skills
mkdir -p $SKILLS_DIR
git clone https://github.com/sawyerhood/dev-browser /tmp/dev-browser-skill
cp -r /tmp/dev-browser-skill/skills/dev-browser $SKILLS_DIR/dev-browser
rm -rf /tmp/dev-browser-skillAmp 用户需手动启动服务器：
cd ~/.claude/skills/dev-browser && npm install && npm run start-serverChrome 扩展（可选）
Chrome 扩展允许 Dev Browser 控制您现有的 Chrome 浏览器，而非启动独立的 Chromium 实例，这样可以使用已登录的会话、书签和扩展。
安装步骤：
- 从 最新发布 下载
extension.zip - 解压到永久位置（如
~/.dev-browser-extension） - 打开 Chrome，访问
chrome://extensions - 启用"开发者模式"（右上角切换）
- 点击"加载已解压的扩展程序"，选择解压后的文件夹
使用方法：
- 点击 Chrome 工具栏中的 Dev Browser 扩展图标
- 切换到"Active"状态以启用浏览器控制
- 让 Claude 连接到您的浏览器（例如说"connect to my Chrome"或"use the extension"）
激活后，Claude 可以控制您现有的 Chrome 标签页，保留所有登录会话、Cookie 和扩展。
权限配置
为避免权限提示，添加到 ~/.claude/settings.json：
{
"permissions": {
"allow": ["Skill(dev-browser:dev-browser)", "Bash(npx tsx:*)"]
}
}或使用 claude --dangerously-skip-permissions 跳过所有提示。
使用示例
只需让 Claude 与浏览器交互：
"Open localhost:3000 and verify the signup flow works" （打开 localhost:3000 并验证注册流程是否正常工作）
"Go to the settings page and figure out why the save button isn't working" （进入设置页面，找出保存按钮不工作的原因）
性能基准测试
| 方法 | 时间 | 成本 | 交互次数 | 成功率 |
|---|---|---|---|---|
| Dev Browser | 3m 53s | $0.88 | 29 | 100% |
| Playwright MCP | 4m 31s | $1.45 | 51 | 100% |
| Playwright Skill | 8m 07s | $1.45 | 38 | 67% |
| Claude Chrome Extension | 12m 54s | $2.81 | 80 | 100% |
测试方法详见 dev-browser-eval
与其他方案对比
| 方案 | 工作原理 | 优缺点 |
|---|---|---|
| Playwright MCP | 观察-思考-行动循环，单独工具调用 | 简单但慢，每个动作都是独立往返 |
| Playwright Skill | 端到端执行的完整脚本 | 快速但脆弱，每次脚本都重新开始 |
| Dev Browser | 有状态服务器 + 智能脚本执行 | 两者兼顾：持久状态 + 灵活执行 |
项目链接
- GitHub 仓库：https://github.com/SawyerHood/dev-browser
- 评估方法：https://github.com/SawyerHood/dev-browser-eval
- 许可证：MIT
- 作者：Sawyer Hood
总结
Dev Browser 通过创新的有状态服务器架构，解决了传统浏览器自动化工具在 AI 辅助开发场景下的痛点。它在速度、成本和成功率之间取得了最佳平衡，是 Claude Code 用户提升开发效率的利器。无论是自动化测试、页面验证还是调试排查，Dev Browser 都能显著减少开发者的重复劳动。