Chrome DevTools CLI

在构建能够操作浏览器的 AI Agent 时，开发者常面临两难选择：使用 Puppeteer/Playwright 等重型框架会引入庞大的依赖和复杂的进程管理；而基于 MCP (Model Context Protocol) 的方案虽然灵活，但每次交互都需传输大量协议负载，严重消耗 LLM 的上下文窗口和 Token 预算。

Chrome DevTools CLI 是一个用 Rust 编写的极简命令行工具，它直接通过 DevTools 协议与用户现有的 Chrome 浏览器通信。没有独立的浏览器进程，没有凭证传递的麻烦，只有一个二进制文件：输入命令，获取结果。

为什么选择 Chrome DevTools CLI？

1. 极致轻量，零上下文开销

• 非 MCP 架构：不同于 chrome-devtools-mcp，它不通过 MCP 层发送冗长的 JSON-RPC 消息。
• 单一二进制文件：无需安装 Node.js、Python 或庞大的浏览器驱动栈。
• Skill 极简：对应的 AI 技能仅是一个 SKILL.md 文件，几乎不占用 Agent 的上下文空间。

2. 智能守护进程，一次授权永久连接

• 自动连接：默认从 Chrome 用户数据目录读取 DevToolsActivePort，无需手动指定 WebSocket URL。
• 持久会话：首次调用时自动生成后台守护进程，建立持久 WebSocket 连接。Chrome 只需提示一次“允许远程调试”，后续命令复用连接，极速响应。
• 空闲回收：守护进程在 5 分钟无活动后自动退出，清理资源。

3. 确定性目标命名，告别标签页混乱

• 友好名称：每个页面被分配一个确定的词对名称（如 [target:red-snake]），而非易变的十六进制 ID 或不稳定的索引。
• 精准定位：无论标签页如何重新排序，只要名称不变，即可精准锁定目标页面，确保自动化脚本的稳定性。

核心功能

导航与管理

• navigate <url>：跳转并等待加载完成。
• new-page <url> / close-page <index>：管理标签页生命周期。
• list-pages：列出所有打开的标签页及其友好名称。

检查与提取

• screenshot --output <path>：捕获页面截图（支持全屏）。
• evaluate <expr>：在页面上下文中执行任意 JavaScript。
• snapshot：导出可访问性树（Accessibility Tree），便于 AI 理解页面结构。

交互与自动化

• click <selector> / hover <selector>：模拟鼠标操作。
• fill <selector> <value>：填充表单、下拉框或切换复选框。
• type-text <text> / press-key <key>：模拟键盘输入。
• wait-for <text>：智能等待特定文本出现，处理异步加载。

快速开始

1. 安装

macOS (Homebrew, 推荐):

brew tap aeroxy/chrome-devtools-cli
brew install chrome-devtools

Cargo:

cargo install chrome-devtools-cli

2. 前置准备

确保 Chrome 已启用远程调试：

1. 打开 Chrome。
2. 访问 chrome://inspect/#remote-debugging。
3. 勾选 “启用远程调试服务器” (Enable remote debugging)。

3. 典型工作流

# 1. 导航并捕获目标名称
chrome-devtools navigate https://example.com
# 输出: Navigated to https://example.com
# 输出: [target:red-snake]

# 2. 查看页面结构
chrome-devtools --target red-snake snapshot

# 3. 交互：填写表单并提交
chrome-devtools --target red-snake fill "#email" "user@example.com"
chrome-devtools --target red-snake click "#submit"

# 4. 提取数据
chrome-devtools --target red-snake evaluate "document.title"

💡 最佳实践：从第二步开始，始终使用 --target <name> 参数，以确保命令作用于正确的页面。

集成 AI Agent (Claude Code)

该工具内置了专为 Claude Code 设计的技能包。只需将 skill/chrome-devtools/SKILL.md 放入你的 Claude Code 插件目录，Agent 即可立即学会如何使用此 CLI。

Skill 优势：

• 完整工作流指导：教会 Agent 如何捕获目标名、如何处理异步加载。
• 命令全覆盖：包含所有可用命令的解释和示例。
• 零配置：Agent 自动识别 chrome-devtools 二进制路径，无需额外训练。