
从 5 万行 JSON 到一句话摘要Chrome DevTools MCP 的 7 个省令牌实操【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp你让 AI 编码助手操控 Chrome 调试页面时大概率没注意过它每次返回了多少内容。Chrome DevTools MCP 让你的 AI 助手能打开、点击、抓包、跑性能分析的 Chrome 实例但用久了你会发现账单和上下文都在悄悄膨胀。这篇讲透 7 个直接砍令牌消耗的设置和用法看完就能改配置。痛点一次性能分析吃掉半个上下文窗口给 AI 助手丢一句看看这个页面为什么加载慢它开始录 trace、抓网络、列控制台。问题就出在这里默认行为下一次全页截图就是一张高分辨率 PNG网络列表不加分页就是全部请求控制台消息一次全量回传。这些原始数据灌进对话后模型注意力被稀释回答变慢后面的任务也被拖下水。更糟的是很多数据它其实根本用不上——它真正需要的往往只有一句话LCP 3.2 秒卡在首图。核心思路返回摘要不是返回数据这个项目的设计原则写得很直白返回语义摘要LCP 是 3.2 秒好过 5 万行 JSON 原文大块数据该落文件就落文件别塞进对话。所有省令牌的技巧本质上都是逼着这个原则在你的工作流里生效能摘要不原文能过滤不全量能落盘不回传。页面状态用快照代替截图快照默认就够了页面状态首选 take_snapshot它基于无障碍树页面上元素的结构化清单生成一份带唯一编号的文本快照体积极小而后续点击、填表全都靠快照里的编号定位。工具描述里明确建议优先快照而非截图你的提示词里也可以直接要求先 take_snapshot 再操作。大快照落盘而不是回传快照有个filePath参数把完整快照写到磁盘文件对话里只留一个路径。需要逐行核对页面结构时读文件即可平时上下文只过一遍摘要。截图省着用用了就压真需要 take_screenshot 时配置里加--screenshot-formatwebp和--screenshot-max-widthWebP 比 PNG 小 3~5 倍再限制下采样尺寸。只截出问题的局部元素别动不动 fullPage。调试数据过滤、分页、只留该看的网络请求按类型过滤list_network_requests 支持resourceTypes参数查接口报错时只取xhr和fetch静态资源的噪音直接挡在门外配合pageSize和pageIdx分页一次只看一页请求。控制台消息只留 errorlist_console_messages 的types参数可以只保留error类消息includeStackTraces默认关闭——它会让响应明显变大真要定位某条报错时再单独用 get_console_message 拉详情。性能追踪看洞察不看原始 traceperformance_start_trace 默认autoStop和reload都是开的导航到目标页后一条工具调用就能录完并自动停拿到的是解析后的性能洞察LCP、INP、CLS 及对应建议而不是原始 trace 文件。确需原始数据时把filePath指到本地trace 落盘不进对话。细节可以看 性能工具实现。启动方式少暴露工具少启新浏览器按类别关掉用不到的工具MCP 客户端会先拉全量工具清单再开始干活工具越多这段系统开销越大。只调性能就加--category-networkfalse不碰模拟设备就加--category-emulationfalse。只做基础浏览器任务更狠一点--slim直接砍到只剩导航、执行脚本、截图 3 个工具。复用已登录的 Chrome 实例每次新起浏览器不仅慢还会丢掉登录态和缓存逼着 AI 重走登录流程。用--browser-url连上已开的 Chrome或 Chrome 144 直接开--autoConnect手动测和 AI 测共用同一个实例省启动时间也省重复操作的来回。批量填表代替逐个填input.ts 里的fill_form能一次填多个表单元素并勾选比逐格fill少掉一半以上的工具调用——每次调用本身就是一次提示词 响应的令牌往返调用次数砍半总消耗跟着减半。实战走查排查一次表单提交报错改之前AI 截一张 fullPage PNG 全页截图把全部网络请求无分页拉回来控制台消息全量列出再逐格填表提交。四五个工具调用上下文里躺着一张图加几百行请求和日志真正的 500 报错淹没在几百个静态资源里。改之后三步。第一步 take_snapshot 拿快照用编号一次 fill_form 填完整个表单并提交第二步 list_network_requests 加resourceTypes只取 xhr 和 fetch、pageSize限一页一眼看到失败的那个调用第三步对那条请求取详情看响应体。整个对话里没有图片、没有全量日志令牌消耗和步数都掉了一大半 避坑提醒截图没指定格式默认回传 PNG在 args 里固定--screenshot-formatwebp别让每次截图都按最大体积计费。快照随手开 verboseverbose 会带出完整无障碍树的所有信息默认值就够用只在元素定位反复失败时才开。autoStop 关了自己忘了开reloadfalse且autoStopfalse时 trace 不会自己停必须记得手动 stop否则后面所有性能调用都会撞已有 trace 在跑的报错。多会话共用默认浏览器目录开多个独立会话时加--isolated用临时用户数据目录避免两个会话抢同一个 Chrome 实例互相干扰。总结方向关键动作省在哪页面状态快照优先截图用 WebP 加限宽一次全页 PNG 换成一段文本调试数据资源类型过滤 分页几百行噪音变成一页相关请求大块数据filePath 落盘对话只留路径原始 trace/快照不进上下文工具面--slim 或按 --category 关类别工具清单本身占的令牌实例复用已开 Chrome批量 fill_form少启动、少调用往返把默认全量回传改成按需摘要你的 AI 助手会从又慢又贵变成又快又省——现在就改一下 MCP 配置试试。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考