- 发布日期
Agent 点错元素、token 爆炸：用 chrome-devtools-axi 压短浏览器任务
真实浏览器自动化又贵又脆时：用 AXI CLI 聚合导航与页面状态，减少轮次与 token，并带下一步操作提示。
Agent 浏览器任务又贵又脆时
chrome-devtools-axi 在 chrome-devtools-mcp 上封装符合 AXI 的 CLI：让 Agent 用更少 token、更少轮次完成真实浏览器任务。
你卡住时为什么需要它
- 点错元素、选择器脆弱，来回重试烧 token
- 原始 DOM/JSON 上下文过大
- 要同时看 Console / Network / 性能，工具链太散
它把导航、取页面状态与下一步建议收成短反馈，适合作为 Web 应用模块的第一枚浏览器 Skill。
核心优势
- Token 更省：输出采用 TOON 编码，相对原始 JSON 约减少 40% token
- 操作更聚合：一条命令可完成导航、截取页面状态并给出后续建议
- 上下文提示：每次结果都带 actionable next-step hints
- Skill 即安装：推荐通过 Agent Skills 安装，无需单独
npm install
快速安装 Skill
使用 npx skills 安装 Agent Skill：
npx skills add kunchenguid/chrome-devtools-axi --skill chrome-devtools-axi -g
安装后，Agent 会在识别到真实浏览器任务时自动加载该 Skill，并通过：
npx -y chrome-devtools-axi
按需拉取 CLI。-g 表示全局安装到例如 ~/.claude/skills/；去掉 -g 则只安装到当前项目。
Agent 看到的交互形态
$ chrome-devtools-axi open https://example.com
page: {title: "Example Domain", url: "https://example.com", refs: 1}
snapshot:
RootWebArea "Example Domain"
heading "Example Domain"
paragraph "This domain is for use in illustrative examples..."
uid=g1:1 link "More information..."
help[1]:
Run `chrome-devtools-axi click @g1:1` to click the "More information..." link
快照中的 uid= 引用带有 g: 代际前缀。页面重新渲染后旧引用会失效并报 STALE_REF，促使 Agent 重新 snapshot，而不是静默点错元素。
其他安装方式
零配置直接跑
Execute `npx -y chrome-devtools-axi` to get browser automation tools.
Session Hook
npm install -g chrome-devtools-axi
chrome-devtools-axi setup hooks
可为 Claude Code / Codex / OpenCode 安装 SessionStart hook，在会话开始时注入当前浏览器状态。安装后需要重启 agent 会话。
源码安装
git clone https://github.com/kunchenguid/chrome-devtools-axi.git
cd chrome-devtools-axi
pnpm install --frozen-lockfile
pnpm run build
pnpm link
工作原理
chrome-devtools-axi (CLI)
│ HTTP localhost:9224
▼
Bridge Server（持久化进程）
│ stdio
▼
chrome-devtools-mcp（Headless Chrome / CDP）
- Bridge 会跨命令保持 MCP 会话，避免每次重启 Chrome
- 首次命令自动拉起 bridge，状态落在
~/.chrome-devtools-axi/ - 可解析 accessibility tree，提取可交互元素引用
- 结构化元数据使用 TOON，进一步压缩 token
常用命令速查
导航
| 命令 | 说明 |
|---|---|
open <url> | 打开页面并 snapshot |
snapshot | 捕获当前页面状态 |
screenshot [path] | 截图 |
scroll <dir> | 滚动 |
back | 后退 |
wait <ms|text> | 等待时间或文本出现 |
eval <expr> | 执行 JS 表达式 |
交互
| 命令 | 说明 |
|---|---|
click @ref | 点击元素 |
fill @ref <value> | 填写表单 |
type <text> | 在当前焦点输入 |
press <key> | 按键 |
hover @ref | 悬停 |
fillform @ref=... | 批量填表 |
调试与性能
| 命令 | 说明 |
|---|---|
console | 查看控制台消息 |
network | 查看网络请求 |
lighthouse | 跑 Lighthouse |
perf-start / perf-stop | 性能追踪 |
heap [path] | 堆快照 |
配置要点
默认 bridge 端口为 9224：
export CHROME_DEVTOOLS_AXI_PORT=9225
连接到已有 Chrome：
export CHROME_DEVTOOLS_AXI_BROWSER_URL=http://127.0.0.1:9222
多会话隔离可用：
CHROME_DEVTOOLS_AXI_SESSION=worker-1 chrome-devtools-axi open https://example.com
在本站中的定位
Web 应用模块下的浏览器自动化入口：抓取、流程回归、前端排障、性能审计可先走这一条。
你现在可以做的下一步
- 按上文安装 Skill，让 Agent 在真实浏览器任务时自动加载。
- 用一条导航 + 取页面状态命令跑通。
- 成功判据：轮次/输出比直接塞 DOM JSON 明显更短，且能按 next-step hints 继续点选。
参考链接
- 仓库：https://github.com/kunchenguid/chrome-devtools-axi
- AXI 协议：https://axi.md
- Agent Skills：https://agentskills.io