mcpField
D
dev-browser

dev-browser

github.com/numman-aliAgent 工作流1.1k35 次安装7 周前更新
代码仓库

关于 dev-browser

通过简短的 Puppeteer 脚本控制真实 Chrome 的命令行技能。它使用常驻守护进程，并让命名页面在多次运行间保留，适用于浏览器开发任务。

主要功能

  1. 01用 Puppeteer 脚本控制真实 Chrome
  2. 02跨运行保留命名页面
  3. 03通过交互式 ARIA 快照检查页面
  4. 04通过命令行运行脚本

适用场景

  1. 01在开发期间自动执行浏览器检查
  2. 02在多次脚本运行间复用页面
  3. 03检查页面上的交互元素
  4. 04浏览网页并执行点击操作

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/numman-ali/n-skills --skill dev-browser

安装后在 Claude Code 中输入/dev-browser确认已加载。

详细介绍

dev-browser

用于通过简短的 Puppeteer 脚本控制真实 Chrome 的 CLI。一个常驻守护进程；命名页面会在多次运行间保留。

npm install -g dev-browser   # bun add -g dev-browser works too; the first run downloads the binary if the install script was blocked
dev-browser install          # only if the first run says "No Chrome found"

在执行非简单任务前，先运行 dev-browser --help（完整指南；dev-browser help <topic> 可查看某个章节）。快速开始：

dev-browser <<'EOF'
const page = await browser.getPage("main");        // named page persists across runs
await page.goto("https://example.com");            // default waitUntil: domcontentloaded
await page.snapshot({ interactive: true })         // ARIA tree with refs; last expression is printed
EOF
dev-browser -e 'const p = await browser.getPage("main"); await p.click("ref/e6"); await p.waitForLoad(); p.url()'

注意事项：每行末尾加分号（以 ( 开头的行会接在上一行后）；返回对象时使用 ({ a, b })；page.click 不会等待（请先使用 waitForSelector）；页面名称按浏览器区分（--headless 和有头模式使用不同的 Chrome 和配置文件）；导航后引用会重置——请重新创建快照；文件路径相对于当前工作目录解析（uploadFile、截图/PDF 的 path）；不要对同一个命名页面并行调用 dev-browser。

评论

支持 Markdown