chrome-devtools-cli

About

一句话： 给 LLM Coding Agent 准备的Chrome浏览器控制工具 —— 直接通过CDP协议连接现有Chrome，无需MCP中间层，一个命令一次操作，输出轻量结果。加上智能页面锁定和持久化守护进程，Token消耗仅为传统方案的百分之一。 🚀 亮点 1. 真正为 AI Agent 设计的工作流 问题：MCP 式的浏览器工具会把每一次交互的完整协议载荷都塞进上下文，一个截图能吃掉几千 token，且每次都要重新连接。 解决：chrome-devtools 直接与 Chrome 的 DevTools 协议对话，一次连接（守护进程保持），一条命令输出一条结果。没有多余的中间层，没有重复的握手开销。 bash 第一次导航，拿到友好锁定名 chrome-devtools navigate [target:red-snake] 后续所有操作通过 --target 永久锁定该标签页 chrome-devtools --target red-snake snapshot chrome-devtools --target red-snake fill "#email" "user@example.com" chrome-devtools --target red-snake click "#submit" 为什么比 MCP / Puppeteer 更省 Token？ | 方案 | 每次操作 Token 开销 | 连接方式 | 页面锁定 | |------|-------------------|----------|----------| | chrome-devtools-cli | 仅命令+结果文本（~100 token） | 持久化守护进程 | 确定性 word‑pair | | MCP Server | 完整 CDP JSON‑RPC 封装（~2000+ token） | 每命令建立新 WS | 需维护会话状态 | | Puppeteer/Playwright | 启动独立浏览器 + 协议日志（~5000+ token） | 每脚本新实例 | 依赖代码变量 | 2. 守护进程 —— 零打扰、自动恢复 智能启动：第一次调用自动拉起后台守护进程，通过 Unix Socket 通信，后续命令无感复用。 绕过 macOS 防火墙弹窗：守护进程先绑定 socket，再惰性连接 Chrome —— 用户不会在每次启动时看到“允许传入连接”对话框。 崩溃自愈：若 Chrome 崩溃或 WebSocket 关闭，守护进程自动退出，下次调用重新建立，无需手动干预。 空闲退出：5 分钟无命令自动清理退出，不留僵尸进程。 3. 更稳健的表单交互 原生支持 <select> 下拉框：fill 命令可直接按显示文本或 value 选中选项。 原生支持 checkbox / radio：传 "true" / "false" 字符串即可切换状态。 全局弹窗拦截：检测到 JavaScript 的 alert/confirm/prompt 未处理时，命令会立即失败并给出明确错误，避免永久挂起。evaluate 子命令新增 --dialog-action accept/dismiss/text 用于自动处理弹窗。 坐标级点击：click-at <x> <y> 用于 Canvas 或无选择器场景。 4. Agent 辅助提示（节省调试 Token） 当你在 evaluate 中写了低效的 DOM 脚本（如长链 document.querySelector(...).querySelector(...)）或触发了 JavaScript 异常，CLI 会动态提示你改用更 token 友好的 snapshot / click / fill 原生命令。 效果：AI 不会在“猜选择器 - 报错 - 再猜”的循环里浪费大量上下文。 5. 完整的功能覆盖 | 类别 | 命令 | |------|------| | 导航 | navigate <url>、--back/--forward/--reload、new-page、close-page、select-page、list-pages | | 检查 | screenshot [--full-page]、evaluate、snapshot（可访问性树 dump） | | 交互 | click、click-at、fill、type-text [--submit-key]、press-key、hover | | 视口 | resize、wait-for <text> | 所有命令支持 --json 输出，可被 MCP 工具或脚本直接消费。 📦 安装 bash Homebrew (macOS / Linux) brew tap aeroxy/chrome-devtools-cli brew install chrome-devtools 或者通过 Cargo cargo install chrome-devtools-cli 前提：Chrome 需开启远程调试 —— 打开 chrome://inspect/#remote-debugging 并启用开关。 🧠 典型使用场景（给 AI 编程助手） 1. 打开页面并锁定 bash chrome-devtools navigate 记住输出的 [target:golden-fox] 2. 获取可访问性树（极省 token） bash chrome-devtools --target golden-fox snapshot → AI 获得页面结构的纯文本描述，比 HTML 或截图 token 少 20 倍。 3. 执行动作 + 提取结果 bash chrome-devtools --target golden-fox fill "#loginfield" "myuser" chrome-devtools --target golden-fox fill "#password" "mypass" chrome-devtools --target golden-fox click "input[name=commit]" chrome-devtools --target golden-fox evaluate "document.title" 整体效果：对比把一个 2MB 的 HAR 或 MCP 会话日志给 LLM，这里每次交互仅消耗几十到几百 token，且不会丢失页面定位。 🙏 致谢与生态 灵感来源于 chrome-devtools-mcp（官方 MCP server），但走出了不同的轻量路线。 协议层基于 Rust 异步 WebSocket 和 serdejson。

Discovery history

1. 阮一峰周刊·用户投稿

   May 3, 2026 – Aug 30, 2026 · 2 observations

2. 阮一峰周刊·正刊推荐

   May 8, 2026 · 1 observations