kunchenguid/chrome-devtools-axi

chrome-devtools-axi – 面向Agent的Chrome自动化

它是什么

• 一个命令行界面，与 chrome-devtools-mcp（无头Chrome控制器）通信，并以 AXI 格式呈现结果，这是一种为大型语言模型Agent设计的紧凑、高效的token表示格式。
• 该CLI特意设计为对Agent友好：单个命令即可完成导航、捕获页面快照、返回下一步的可执行提示，同时保持数据量低（TOON编码输出比原始JSON节省约40%的token）。

为什么对AI Agent重要

• 许多基于LLM的Agent需要真实的浏览器来执行简单HTTP请求无法处理的任务（例如点击多步骤流程、处理对话框、运行JavaScript、提取动态内容）。chrome-devtools-axi为这些Agent提供了稳定、低开销的Chrome桥接。
• 该工具与 AXI 生态系统集成（参见 https://axi.md），可通过 npx skills 安装为Agent Skill，让Agent按需加载，无需手动运行npm install。

工作原理

1. 桥接服务器 – 一个分离的进程在CLI调用之间保持持久的MCP会话，因此每次命令不会重启Chrome。
2. CLI – 解析参数，通过HTTP（默认 localhost:9224）向桥接发送请求，接收TOON编码的快照，并打印人类可读的摘要以及下一步操作的 help 提示。
3. 持久性选项 –
   • 独立模式：桥接启动本地 chrome-devtools-mcp 子进程（默认）。
   • 共享服务：将 CHROME_DEVTOOLS_AXI_MCP_SERVER_URL 指向已运行的MCP服务器，以便多个Agent共享单个Chrome实例。
4. 输出 – 可访问性树的快照以TOON编码，交互元素具有稳定的 @g<N>:<uid> 引用。Agent可以将这些引用反馈给CLI进行点击、填写等操作。

主要命令（面向Agent）

命令	功能
open <url>	加载页面，捕获可访问性快照，并返回简短摘要和 help 建议（例如 click link @g1:1）。
click @<uid>	点击由最新快照中的引用标识的元素。
fill @<uid> <text>	在表单字段中输入文本。
eval <js>	在页面上下文中执行任意JavaScript并返回结果（包装为TOON值）。
snapshot	捕获当前页面的可访问性树而不进行导航。
screenshot …	保存视口或整个页面的PNG/JPEG/WebP。
lighthouse …	运行Lighthouse审计并将报告写入磁盘。
perf-start / perf-stop	启动和停止Chrome性能跟踪。
setup hooks	为Claude Code、Codex和OpenCode安装会话启动钩子，使Agent在每次聊天开始时自动接收当前浏览器上下文。

安装与激活

1. Agent技能方式（推荐）

   npx skills add kunchenguid/chrome-devtools-axi --skill chrome-devtools-axi -g
   

   该技能告诉AXI兼容的Agent在需要真实浏览器时运行 npx -y chrome-devtools-axi …。
2. 零安装运行 – Agent可以直接使用 npx -y chrome-devtools-axi 调用CLI，无需预先安装。
3. 全局安装（用于手动使用或钩子设置）

   npm install -g chrome-devtools-axi
   chrome-devtools-axi setup hooks
   

4. 从源码 – 克隆，pnpm install --frozen-lockfile，pnpm run build，pnpm link。

性能亮点（来自README的基准测试）

指标	chrome-devtools-axi	次优
每个任务的平均输入token	79,141	82,532 (dev-browser)
每个任务的平均成本	$0.074	$0.078
平均持续时间	21.5秒	24.6秒
平均Agent循环次数	4.5	4.8
成功率	100%	99%
该工具与原始的 chrome-devtools-mcp 相比，token使用量减少了约57%，LLM-Agent循环次数减少了约27%。

LLM-Agent的典型用例

• 研究工作流 – 打开Wikipedia页面，点击相关链接，提取表格，让Agent总结。
• GitHub导航 – 浏览仓库，打开PR页面，点击“Files changed”，获取差异。
• 多站点比较 – 在并行标签页中加载多个产品页面，抓取价格元素，计算差异。
• 性能审计 – 对Agent正在评估SEO或UX的页面运行Lighthouse或Chrome跟踪。
• 表单自动化 – 填写登录表单，提交，并在继续前验证结果页面状态。

限制/注意事项

• 该CLI不是面向用户的斜杠命令；它旨在由Agent调用，而非人工直接输入。
• 如果页面在没有新快照的情况下发生变化，引用（@g<N>:…）会过期；CLI会以 STALE_REF 中止，因此Agent必须重新快照。
• 快照输出默认截断至约16KB，除非使用 --full，对于非常大的页面可能需要。
• 桥接进程在 ~/.chrome-devtools-axi/ 下写入PID文件；如果该文件损坏，可能需要手动清理桥接。
• 要在多个Agent之间共享单个Chrome实例，必须运行兼容的 chrome-devtools-mcp 服务并设置相应的环境变量。

总结 chrome-devtools-axi 是一个专门构建的桥接，让LLM Agent高效控制真实的Chrome浏览器。通过使用节省token的TOON格式对结果进行编码，并提供内置的“下一步”提示，它减少了模型与工具之间的往返，从而实现更便宜、更快、更可靠的Agent驱动Web自动化。