用途
chrome-devtools-cli 用于在终端中通过 chrome-devtools CLI 进行有边界的浏览器自动化操作，适合用户明确需要 shell 命令或脚本的场景。技能说明中指出，如果当前运行环境已经暴露 Chrome DevTools MCP 工具，应优先直接使用 MCP 工具；只有在需要 CLI 命令或脚本时才使用本技能。
主要能力
该技能围绕以下常见命令展开：
- 页面管理：
chrome-devtools list_pages、chrome-devtools new_page "https://example.com"、chrome-devtools navigate_page --url "https://example.com" - 页面快照与交互：
chrome-devtools take_snapshot、chrome-devtools click "uid"、chrome-devtools fill "uid" "text"、chrome-devtools press_key "Enter" - 调试信息：
chrome-devtools list_console_messages --types error、chrome-devtools list_network_requests --pageSize 50 --pageIdx 0 - 审计与性能：
chrome-devtools lighthouse_audit --mode "navigation" --device "desktop"、chrome-devtools performance_start_trace true true --filePath "trace.json.gz" - 截图：
chrome-devtools take_screenshot --fullPage true --filePath "page.png"
命令结构为：chrome-devtools <tool> [arguments] [flags]。
使用方式
技能给出的工作流程为：
- 通过
chrome-devtools --help确认 CLI 是否存在；若不存在则提供安装指引。 - 导航或选择页面。
- 获取快照以获得 uid。
- 使用 click、fill、press_key、upload_file 等聚焦命令执行操作。
- 通过新的快照、控制台消息、网络请求或截图进行验证。
调度规则方面：当参数为空时，询问需要自动化哪个页面或 CLI 任务；当用户请求 CLI 示例时，提供有边界的 chrome-devtools <tool> 命令及预期输出；当用户请求 shell 脚本时，编写调用 chrome-devtools 命令并处理失败的脚本；首次设置时，从 references/installation.md 提供安装指引，不自动安装；输出较大时，使用 CLI 输出文件或 JSON 解析，而不是打印巨大的快照或 trace。
适用场景
适用于需要在终端中以 shell 命令或脚本方式驱动 Chrome DevTools 的任务，例如页面导航与交互、控制台与网络请求查看、Lighthouse 审计、性能追踪、全页截图等。
限制与注意事项
技能中的护栏规则包括：除非用户明确要求，否则不要运行 npm i -g 或修改全局包状态；在使用不熟悉的参数前先运行 chrome-devtools <tool> --help；脚本需要稳定解析时使用 --output-format=json；不要将原始 trace、截图或堆快照产物读入上下文；在 shell 命令中为文件路径和 URL 加引号。关键规则还包括：除非用户明确要求，不要安装或更新全局 npm 包；除非用户明确需要 CLI 命令或脚本，否则优先直接使用 MCP 工具；保持 trace、截图和快照产物不进入版本控制。变更验证方面，在宣布技能变更完成前，运行 uv run wagents validate、uv run python skills/skill-creator/scripts/audit.py skills/chrome-devtools-cli 和 uv run wagents package chrome-devtools-cli --dry-run。
参考文件
- references/installation.md：可选全局 CLI 安装指引与故障排查，当 chrome-devtools 二进制缺失且用户希望使用 CLI 时阅读。
- references/provenance.md：上游来源、提交、许可证和改编说明，在修改该技能或审计来源前阅读。