技能介绍

当需要驱动浏览器完成截图、性能分析或网页数据提取，却又没有现成脚本时，很容易卡在“该调哪个能力、参数怎么传、输出怎么验证”这三个问题上。这个技能用 Chrome DevTools 的思路拆解浏览器操作，把每一步都变成“能力 + 参数”的明确调用。

核心能力与工作流程

环境准备：依赖本机 Chromium 与 Node 运行时，Linux 需先安装 libnss3 等系统库；输出统一存放到 ./docs/screenshots 并用绝对路径，避免路径漂移。
核心操作：

- 导航：打开目标 URL，支持 load、domcontentloaded、networkidle2 三种等待策略与超时设置。
- 截图：支持整页或指定元素截图；超过 5MB 时自动压缩，PNG 缩至 90% 质量（85）、JPEG 用质量 80 的渐进式格式，输出会附带压缩信息。
- 交互操作：按 CSS 或 XPath 选择器定位元素，支持点击、填充表单；链式操作可保持浏览器不关闭。
- 执行 JS：在页面上下文运行表达式，提取结构化数据（如列表项标题与链接）。
- 快照：导出可交互元素的标签、文本、选择器，用于发现正确选择器。
- 调试支持：按类型（error/warn）与持续时间收集控制台消息；记录网络请求/响应并落地为 JSON；测量 Core Web Vitals（LCP/CLS/INP）并生成性能轨迹。

验证与排错：截图后用 ls -lh 确认文件存在，读图检查内容，校验 JSON 中的 success:true；遇到选择器失败，先用快照找正确选择器再试 XPath；脚本卡住就加大超时或换等待策略；空白截图改用 networkidle2 等待；截图过大则安装压缩工具、指定元素或降低质量。

适用边界与注意点

技能不用于绕过登录态、反爬对抗或破坏网站服务条款的抓取。它聚焦在“安全可落地”的自动化操作：输出结构化 BrowserResult 工件（包含动作、URL、成功状态、输出路径、压缩信息、指标等），截图可交给 ai-multimodal 做内容分析，性能/网络 JSON 可交给 web-testing 做质量门禁。