/ 目录 / 演练场 / dev-browser
← 全部服务器 ↗ GitHub
● 社区 SawyerHood ⚡ 即开即用

dev-browser

作者 SawyerHood · SawyerHood/dev-browser

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

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

▶ 观看演示 📦 安装 💡 使用场景

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： dev-browser

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

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

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

步骤
  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