用途:面向前端开发的轻量浏览器调试工具包,通过命令行脚本而非 MCP 服务器运行,以减少上下文占用(约 300 tokens,对比 13k-18k)。适用于调试 CSS、HTML 或 JavaScript 问题。
主要能力:提供启动浏览器、导航、截图、页面内执行 JS、交互式选取元素、读取控制台输出、查看网络活动、获取 DOM 快照、调整视口尺寸、关闭浏览器等脚本。默认使用 Chrome(DevTools Protocol,端口 9222),可用 --webkit 切换到 Playwright 的 WebKit 以贴近 Safari 行为。
使用方式:可用斜杠命令 /debug-page、/screenshot、/pick-element、/test-responsive、/verify-changes,或直接运行脚本,例如 node scripts/browser-start.js、node scripts/browser-nav.js https://localhost:3000、node scripts/browser-screenshot.js、node scripts/browser-eval.js 'document.title'、node scripts/browser-pick.js "Select element"、node scripts/browser-console.js --errors、node scripts/browser-network.js --failures、node scripts/browser-dom.js "<sel>"、node scripts/browser-close.js。启动时加 --profile 可保留登录状态。脚本输出可写入文件以便对比,如 node scripts/browser-screenshot.js --output=/tmp/before.png。
适用场景:修改 CSS/HTML 后的视觉验证、控制台错误检测、多断点响应式测试、元素检查、Safari 布局问题排查、跨浏览器对比及 CI/无头测试。
限制与依赖:需要 Node.js 与 puppeteer-core(npm install -g puppeteer-core);WebKit 需安装 Playwright(npm install -g playwright 与 npx playwright install webkit)。Chrome 需可从命令行启动。常见问题包括无法连接浏览器、脚本缺少执行权限、Chrome 已在运行、未找到 WebKit。更复杂的 CSS、JS 与自调试场景可参考 references 目录下对应文档。