基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
AIHT
内容
精选全部 AI 动态热点榜AI 日报收藏
分类
模型行业编程产品技术观点开源
更多
Agent 接入
返回首页开发者导航
AIHT
精选 / 资讯详情
8.0
热点
AI SCORE
编程提效2026-10-22 09:34

浏览器 Agent 读图表的成本实测

dev.to · AI#浏览器Agent#Claude Code#成本优化
Editor brief · 编辑速览

作者用两类图表任务对比 opencli 与 claude-in-chrome,合计 12 次运行均答对,并以 API、CSV 数据核验结果。opencli 的总计费约低 45%,中位耗时为 29 秒,对照工具为 56 秒,但样本规模较小。

文章思维导图
Knowledge map
拖拽缩放
AI deep read

AI 深度解读

浏览器 Agent 从图表里找数字,应该沿着曲线逐点悬停,还是直接读取背后的数据?作者用 opencli 和 claude-in-chrome 做了 12 次同任务测试:答案全部正确,但 opencli 的总费用和 token 用量都少了 45%。

差别来自取数路径。一个工具让 Agent 更容易调用 API、下载 CSV,另一个让它更自然地操作鼠标、读取提示框。对需要自动查数据的程序员,这个小实验值得看的,是工具接口如何影响模型的选择,以及调用轮数如何放大成本。

同样答对,为什么取数过程差这么多

作者此前在五项只读任务中测得,opencli 比 claude-in-chrome 少花 62%。这次补测的是上一轮没覆盖的场景:数据藏在图表里。

测试包含两道题:

  • 在 Wikimedia pageviews 中查询「Prompt engineering」词条 2026 年 9 月的访问峰值。Wikimedia REST API 给出的答案是 9 月 23 日,736 次浏览。
  • 在 Our World in Data 中查询印度尼西亚 2000 年和 2020 年的预期寿命。OWID CSV 中的数值分别是 66.3 和 68.8。

第一题的图表使用 canvas,aria-label 只列出前 10 天,无法仅靠这段无障碍文本找到全月峰值。第二题使用 SVG,并提供 Table 标签页。

每个工具对每道题各跑三次,共 12 次。所有运行都使用全新的无界面 Claude Code 会话,通过 claude -p 启动,使用 Sonnet,最多 40 轮,只允许使用一种浏览器工具;每次重复测试交替安排工具顺序。费用和 token 来自 API 返回的实际计费记录。

12 次全部答对。可见,这次测出的主要差异是完成任务的成本,而不是答案准确率。

工具让哪条路顺手,Agent 就更可能走哪条路

claude-in-chrome 选择操作图表:把指针移到数据点,读取提示框里的数值。查 pageviews 峰值时,它需要沿着曲线寻找最高点。

opencli 的六次运行全部绕过了图表。在 pageviews 页面中,它从页面内调用 Wikimedia API;在 OWID 中,它获取 CSV 导出数据。

作者没有把图表图片直接交给任何一个工具。具体走哪条路径,是 Agent 自己选的,但工具提供的操作方式影响了这个选择:页面文本和 fetch 容易获取,就方便走数据接口;截图和指针操作容易使用,就容易逐点悬停。

给 Agent 什么操作能力,也是在影响它如何解决问题。

这里不能直接推导出「opencli 更懂图表」。实验观察到的是,它在这两道题里都找到了图表背后的数据源,并成功利用了这些数据源。

为什么少几次悬停,就能省下不少费用

作者解释,两组实验的每次模型调用都要重新读取约 30k tokens 的基础上下文。因此,调用轮数占了大部分账单。逐点悬停可能需要十几轮,一次 fetch 则可能用一轮拿回所需数据。

这也是为什么操作看起来只多了几个鼠标动作,模型侧的开销却可能明显增加。页面工具返回结果后,模型还要再次读取上下文,决定下一步。

不过,45% 的费用降幅需要结合缓存看。pageviews 的第三次运行,两种工具的费用分别只有 $0.067 和 $0.068,约为前两次的十分之一;OWID 中 claude-in-chrome 的第三次运行也降到了 $0.066。

这些运行的 token 数没有减少,只有费用下降。作者推测是前一次运行让提示词缓存变热,但没有确认。总费用仍按实际账单计入这些结果。因此,45% 的 token 降幅是另一个有用信号,不能只盯着费用百分比。

我的判断

我认同作者的工程取舍:如果任务是查数字,应该优先让 Agent 找结构化数据,再把视觉读取作为后备路径。API 和 CSV 能直接给出数值;图表悬停则需要多次交互,查峰值这类任务尤其容易拉长流程。

但这不是通用工具排名。样本只有两道题,每个工具各跑三次,而且两个网站都公开提供数据。对于只有像素、没有可用 API 或导出的图表,作者尚未测试,也没有证据说明 opencli 仍有优势。

两组采用不同操作路径后的实测结果,支持「数据路径可能更省」;它没有隔离验证工具接口为何导致这种选择,也没证明其他模型、站点和任务能复现同样幅度。Sonnet 的具体版本,原文也没交代。

能拿来做什么

  • 给浏览器 Agent 设计工具时,同时提供页面文本读取和 fetch 能力,让它有机会发现并调用页面背后的数据接口。
  • 编写查图表数字的任务指令时,可以要求先找 API、CSV 或表格入口,找不到再使用悬停和视觉读取,并保留最终采用的数据来源。
  • 比较浏览器工具时,把答案正确率、调用轮数、token 和实际费用一起记录;遇到费用骤降但 token 不变的情况,检查是否存在缓存影响。
  • 为自己的工作流补一组「只有图片、没有数据导出」的任务,确认数据路径失效后,Agent 还能否完成查询。
Original source

本文由 AI 通读原文后重新编写,观点部分为站内判断,细节以原文为准,来源 dev.to · AI,原文版权归原作者所有。

阅读原文
上一篇
手机端小模型如何把口述转成联系人
下一篇
20 种编程 Agent 实测:得分之外看成本与评测可信度

资讯速览

dev.to · AI · 2026-10-22 09:34

AI 评分 8.0 / 10

相关标签

#浏览器Agent#Claude Code#成本优化

继续阅读

  • 文章与视频检索:从整篇匹配到片段定位
  • 手机端小模型如何把口述转成联系人
  • 20 种编程 Agent 实测:得分之外看成本与评测可信度
  • AI 只学一次字段映射,后续对账交给 Python
  • 追踪一次 Agent 请求,定位数秒额外开销