用途:为 Web 应用或线上网站生成带标注截图的 Markdown 文档,适用于“给应用截图”“记录页面”等需求。
前置条件:需全局安装 agent-browser CLI:npm i -g agent-browser && agent-browser install。
主要流程:
- 确定目标:线上站点用 agent-browser open <url> 并等待加载,处理 Cookie 弹窗;本地开发服务器需先找到或启动(常见端口 3000/5173/4321/8080),自签名证书可加 --ignore-https-errors。
- 梳理站点:打开首页、用 --annotate 截图勘察、snapshot 导航发现页面,SPA 还需检查源码路由,并请用户确认页面清单(线上站点建议 5-10 页)。
- 逐页截图:设置视口与截图目录,屏蔽广告与追踪脚本,先验证选择器再注入标注脚本(annotateMulti),标注类型有 click、box、circle,每张截图最多 3 个标注,随后截图并检查质量。
- 生成 Markdown:文件名如 docs/<domain>-screenshots.md,用编号引用标注。
- 可选环境对比:agent-browser diff url / diff screenshot / diff snapshot。
- 清理:agent-browser network unroute 与 agent-browser close。
还支持交互截图(snapshot 取 ref 后 click/type)、录制交互流程视频、移动端设备模拟截图。
限制:需先安装 agent-browser;选择器失效会导致标注不可见,必须先验证;线上站点可能遇到登录墙、反爬、懒加载等问题,需参考其 references 文档处理。