SawyerHood/dev-browser · 上手攻略

• 仓库：SawyerHood/dev-browser
• 链接：https://github.com/SawyerHood/dev-browser
• 分类：academic-writing
• 作者：Tom
• 更新：2026-08-09

是什么

dev-browser 是一个让 AI Agent（如 Claude Code、Codex）直接控制浏览器的 Claude Skill。它通过在 QuickJS WASM 沙箱中执行 JavaScript 脚本，实现浏览器自动化操作，同时保证宿主系统安全——脚本没有文件系统或网络访问权限。

核心定位：在 AI Coding 场景下，提供比传统 Playwright MCP / Playwright Skill 更低成本、更高成功率的浏览器控制方案。

解决什么问题

日常 AI Agent 任务中经常遇到"需要访问网页"的场景，例如：

• AI 需要抓取页面内容来回答用户问题
• 需要点击按钮、填写表单完成自动化操作
• 需要截图记录网页状态

传统方案各有缺陷：

dev-browser 在官方 benchmark 中以最低成本（$0.88）和最快速度（3m53s）实现 100% 成功率，同时沙箱级别安全。

快速安装

# 全局安装 CLI
npm install -g dev-browser

# 安装 Playwright + Chromium（只需一次）
dev-browser install

# macOS/Linux 快速验证
dev-browser --headless <<'EOF'
const page = await browser.getPage("main");
await page.goto("https://example.com", { waitUntil: "domcontentloaded" });
console.log(await page.title());
EOF

Windows 用户需先以管理员权限启动 PowerShell，完成安装后用 chrome.exe --remote-debugging-port=9222 开启 Chrome 远程调试，再 dev-browser --connect 连接。

核心用法

基础操作

// 获取或创建命名页面
const page = await browser.getPage("main");

// 导航
await page.goto("https://example.com", { waitUntil: "domcontentloaded" });

// 截图
await page.screenshot({ path: "screenshot.png" });

// 点击 / 填表
await page.click("#submit-button");
await page.fill("input[name='q']", "search term");

// 执行 JS
const result = await page.evaluate(() => document.title);

连接已有 Chrome（不新开浏览器）

# 1. 在 Chrome 地址栏打开 chrome://inspect/#remote-debugging
# 2. 确认 "Discover network targets" 已勾选
# 3. 运行脚本
dev-browser --connect <<'EOF'
const tabs = await browser.listPages();
console.log(JSON.stringify(tabs, null, 2));
EOF

AI 友好快照（computer-use 工具集）

dev-browser 在 Playwright Page 对象上扩展了两个工具集：

// pixel/vision 级别（像素坐标操作）
const { path, width, height } = await page.cua.screenshot();
await page.cua.click({ x: 100, y: 200 });

// DOM-id 级别（更稳定的元素定位）
const dom = await page.domCua.getVisibleDom();
await page.domCua.click({ nodeId: 42 });

Claude Code 免审批配置

在项目 .claude/settings.json 或用户级 ~/.claude/settings.json 中加入：

{
  "permissions": {
    "allow": ["Bash(dev-browser *)"]
  }
}

即可在 Claude Code 中直接运行 dev-browser 命令而无需每次确认。

AI Skill 自动安装

# 安装到 Codex / Claude / Agents 三种 AI 环境
dev-browser install-skill --codex
dev-browser install-skill --claude
dev-browser install-skill --agents

# 非交互环境（CI/CD）自动安装全部
dev-browser install-skill

典型适用场景

1. 网页内容抓取：让 AI 分析页面信息而无需手动复制粘贴
2. 自动化表单填写：批量操作多步骤网页流程
3. AI 编程辅助：Agent 需要登录网站获取信息或完成开发者工作流
4. 持续集成测试：headless 模式下做 UI 自动化回归测试
5. 需要登录态的操作：复用已有 Chrome 的登录状态，避免二次认证

坑与注意

1. 沙箱限制：脚本无法访问宿主文件系统（只能操作 ~/.dev-browser/tmp/ 目录）和网络，依赖网络的操作（如 API 调用）需通过 page.evaluate 在页面上下文中执行。

2. Windows Chromium 下载：npm 安装时若网络问题导致 Chromium 下载失败，可手动从 GitHub Releases 下载 dev-browser-windows-x64.exe 放入正确路径，或使用 --connect 复用已安装的 Chrome。

3. idle-timeout 默认无限：长期运行任务时，daemon 不会自动关闭 Chromium；在 ~/.dev-browser/config.json 中配置 "idleTimeout": "5m" 或显式传 --idle-timeout 5m 防止资源泄漏。

4. 脚本环境是 QuickJS 而非 Node.js：不要使用 Node.js 特有 API（如 require()、__dirname）；标准浏览器 Web API 均可使用。

5. --connect 需要 Chrome 开启调试端口：Windows 上若连接失败，先确认 chrome.exe --remote-debugging-port=9222 已运行。

与同类对比

browser-use 更适合 Python 生态的 AI Agent；Playwright MCP 需要额外服务进程；dev-browser 是最轻量的选择，尤其适合 Claude Code / Codex 环境。

一句话推荐结论

AI 编程场景下需要控制浏览器时，dev-browser 是性价比最高（成本 $0.88、速度最快）且安全性最好（QuickJS 沙箱）的选择，安装一行 npm 命令，值得优先尝试。

最小可跑命令（核验路径）

# 环境：Node.js ≥ 18，Linux/macOS/Windows
npm install -g dev-browser   # 需要网络下载约 80MB Chromium
dev-browser install          # 安装 Playwright + Chromium（约 200MB）
dev-browser --headless <<'EOF'
const page = await browser.getPage("test");
await page.goto("https://example.com");
console.log(await page.title());
EOF
# 预期输出：Example Domain
# 硬件要求：无特殊，2GB RAM + 500MB 磁盘

⚠️ 若 dev-browser install 卡在 Chromium 下载，可手动从 https://github.com/SawyerHood/dev-browser/releases 下载对应平台二进制文件，或改用 --connect 连接已安装 Chrome。

原始 commit：https://github.com/SawyerHood/dev-browser/commit/main · MIT License · 作者 Sawyer Hood