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-skill

Amp 用户需手动启动服务器：

cd ~/.claude/skills/dev-browser && npm install && npm run start-server

Chrome 扩展（可选）

Chrome 扩展允许 Dev Browser 控制您现有的 Chrome 浏览器，而非启动独立的 Chromium 实例，这样可以使用已登录的会话、书签和扩展。

安装步骤：

1. 从 最新发布 下载 extension.zip
2. 解压到永久位置（如 ~/.dev-browser-extension）
3. 打开 Chrome，访问 chrome://extensions
4. 启用"开发者模式"（右上角切换）
5. 点击"加载已解压的扩展程序"，选择解压后的文件夹

使用方法：

1. 点击 Chrome 工具栏中的 Dev Browser 扩展图标
2. 切换到"Active"状态以启用浏览器控制
3. 让 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-eval

与其他方案对比

项目链接

• GitHub 仓库：https://github.com/SawyerHood/dev-browser
• 评估方法：https://github.com/SawyerHood/dev-browser-eval
• 许可证：MIT
• 作者：Sawyer Hood

总结

Dev Browser 通过创新的有状态服务器架构，解决了传统浏览器自动化工具在 AI 辅助开发场景下的痛点。它在速度、成本和成功率之间取得了最佳平衡，是 Claude Code 用户提升开发效率的利器。无论是自动化测试、页面验证还是调试排查，Dev Browser 都能显著减少开发者的重复劳动。