/ 目录 / 演练场 / dev-browser
● 社区 SawyerHood ⚡ 即开即用

dev-browser

作者 SawyerHood · SawyerHood/dev-browser

一个 Claude Skill,启动一个带 DevTools 的浏览器供 agent 驱动——导航、点击、检查、截图。

dev-browser 通过 skill prompt 为你的 Claude agent 提供一个面向开发者的无头浏览器。它封装了一个基于 CDP 的浏览器,并提供 agent 友好的能力:稳定的选择器、每步操作后自动截图,以及适合 LLM 消费的 DOM 快照(带大小感知分块)。适合临时需要浏览器但不想完整配置 playwright 的场景。

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "dev-browser-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "dev-browser-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/SawyerHood/dev-browser",
          "~/.claude/skills/dev-browser"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add dev-browser-skill -- git clone https://github.com/SawyerHood/dev-browser ~/.claude/skills/dev-browser

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: dev-browser

不配置 MCP 的情况下快速进行网页调研

👤 不想在 MCP 配置中加入 Playwright 的开发者 ⏱ ~15 min beginner

何时使用: 你的 Claude Code 会话需要偶尔浏览一次网页,不想为此部署一个持久的浏览器服务器。

前置条件
  • Skill 已安装 — git clone https://github.com/SawyerHood/dev-browser ~/.claude/skills/dev-browser
  • Chromium 可用npx playwright install chromium 下载二进制文件
步骤
  1. 启动浏览器
    使用 dev-browser。打开 https://vercel.com/docs/functions。列出侧边栏的章节。✓ 已复制
    → 标题已提取,附锚点 URL
  2. 深入阅读
    导航到「Runtime」——阅读页面并用一段话各自总结三种运行时选项。✓ 已复制
    → 三段文字,附 URL 片段引用
  3. 截图留存
    截图价格部分,留作笔记。✓ 已复制
    → 截图已保存到本地

结果: 在需要时用浏览器完成调研,没有持续运行的基础设施负担。

注意事项
  • Chromium 二进制文件缺失 — 运行一次 npx playwright install chromium
搭配使用: filesystem

部署前对 staging 环境的登录流程做快速健全性检查

👤 部署前注重 QA 的开发者 ⏱ ~5 min beginner

何时使用: 部署前,你想把关键的主流程点击一遍。

步骤
  1. 打开页面
    使用 dev-browser。打开 https://staging.myapp.com,截图。✓ 已复制
    → 落地页截图
  2. 登录
    点击「登录」,输入 [email protected] / Test1234,提交。✓ 已复制
    → 登录后的 dashboard 截图
  3. 确认
    页面上是否可见「Welcome, qa」字样?✓ 已复制
    → 是/否 + 截图

结果: 点击部署前 60 秒完成冒烟测试。

注意事项
  • 登录页有 CAPTCHA — 在 staging 中加入仅测试用的绕过方案;dev-browser 不是 CAPTCHA 破解工具

组合

与其他 MCP 搭配,撬动十倍杠杆

dev-browser-skill + filesystem

将截图与笔记一起保存

每步操作后截图保存到 /notes/web-research/。✓ 已复制
dev-browser-skill + chrome-devtools

需要 DevTools 深度分析时,升级到 chrome-devtools MCP

dev-browser 给了我页面内容——现在用 chrome-devtools 检查网络瀑布图。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
open_url url 导航到页面 0
click selector|text 与页面交互 0
type selector, text 输入文本 0
snapshot none 了解当前页面状态 0

成本与限制

运行它的成本

API 配额
N/A
每次调用 Token 数
DOM 快照带大小限制;截图为 base64
费用
免费
提示
不需要时跳过快照——通常只有截图就够了

安全

权限、密钥、影响范围

凭据存储:
数据出站: 直接流向你导航到的目标网站

故障排查

常见错误与修复

Error: Executable doesn't exist at chromium path

npx playwright install chromium——skill 依赖 Playwright 的二进制文件

Selector not found

先运行 snapshot;从真实 DOM 中选取选择器,而非猜测

Page blocks automation

网站检测到无头浏览器——尝试在 skill 配置中设置 headless=false

替代方案

dev-browser 对比其他方案

替代方案何时用它替代权衡
playwright MCP你需要一个持久注册的 MCP 浏览器配置更多;skill 更轻量
mcp-chrome你需要使用真实的已登录 Chrome不是无头测试浏览器

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills