从全页截图到语义快照Chrome DevTools MCP 省 token 的实操指南【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcpChrome DevTools MCP 让 AI 编码助手直接控制真实 Chrome做自动化、调试和性能分析。用起来第一个头疼的就是 token每次工具调用都往上下文塞数据对话又贵又慢。这篇文章是一套对着源码核过实的 Chrome DevTools MCP 令牌优化做法照着改就能生效。先让每次返回只带必要数据典型场景你让助手看看这个页面它回了一张全页截图PNG 体积不小再来三轮上下文窗口直接见底。更隐蔽的是截图、追踪这类重资产如果被内联返回几万行 JSON 会原封不动进上下文。用无障碍树文本快照替代全页截图take_snapshot基于 a11y 树生成文本快照工具描述里明确写了prefer snapshot over screenshot。默认不带verbose只列出必要元素个别超大页面可以用filePath落盘上下文里只留一个路径。省在哪一次几百字符的文本换掉一张整页图详见 快照工具。让大产物走文件别内联项目设计原则里有一条 Reference over Value截图、trace 这类重资产只返回文件路径不回传原始数据。evaluate_script、get_network_request、performance_stop_trace都支持filePath参数。省在哪几万行 JSON 躺在磁盘上不进上下文。这条原则原文在设计原则里。截图真要拍时压缩再加缩放--screenshot-format设jpeg或webp官方注释里写明体积约为 PNG 的 1/3 到 1/5再配--screenshot-max-width把宽度限下来。省在哪同样一张图上下文占用直接砍到几分之一。把多轮试探压成单轮第二个痛点是轮次。助手每探一步就要读一遍工具列表几十上百个工具的 schema 描述本身就是常驻开销网络请求、控制台日志这类列表不加过滤一次能回几百条。关掉用不到的工具类别--no-category-emulation、--no-category-network、--no-category-performance可以按类别摘掉工具只做基础浏览器任务时直接--slim只暴露导航、执行脚本、截图三个工具。省在哪每轮对话里工具清单的描述文本变短这是纯 MCP 服务器减少 token 消耗里最立竿见影的一招选项定义见 mcp-options。列表查询先过滤再分页list_network_requests支持resourceTypes只拉你要的类型配pageSize/pageIdx分页默认每页 20 条分页逻辑在 pagination.tslist_console_messages用types只抓 errorincludeStackTraces默认关着别把每条栈都拉上来实现见 console.ts。省在哪几百条请求缩成一页 20 条相关项。批量操作完再拍一次快照click、fill这类输入工具的includeSnapshot默认就是false。表单一次填完最后手动take_snapshot确认状态而不是每填一个字段回传一份快照。省在哪五步表单从五份页面数据变成一份。别为每次会话交浏览器启动税每次会话冷启动一个 Chrome加载、登录态、缓存全部重来时间和 token 双份烧。复用已经在跑的浏览器--autoConnectChrome 144直连本机正在运行的浏览器或者--browser-url、--ws-endpoint连已开调试端点的实例。省在哪会话之间浏览器常驻DevTools 自动化省 token 的隐藏大头其实是这些重复的启动和页面重加载。固定 profile 目录吃浏览器缓存默认 profile 在~/.cache/chrome-devtools-mcp同一站点反复调试时静态资源走缓存需要干净环境才用--isolated临时目录。省在哪少下载的字节少等的加载轮次。照这条流程走一遍性能排查navigate打开目标 URL。performance_start_trace起追踪autoStop默认 true自动重载并停止原始 trace 用filePath存盘实现见 performance.ts。看返回的语义摘要和 insights原始 trace 不进上下文。list_network_requests加resourceTypes过滤加分页挑最大请求用get_network_request的responseFilePath把大响应落盘。list_console_messages按types: [error]确认无 JS 报错。收尾take_snapshot一份文本快照确认最终状态。关键选项速查--slim只暴露导航、脚本执行、截图 3 个工具--no-category-emulation/--no-category-network/--no-category-performance关闭对应类别工具--autoConnect连接本机运行中的 Chrome 144--browser-url/--ws-endpoint连接已运行的调试实例--screenshot-format截图默认格式jpeg/webp 比 PNG 小 3-5 倍--screenshot-max-width/--screenshot-max-height截图按比例降采样--user-data-dir指定 profile 目录复用浏览器缓存take_snapshota11y 树文本快照优先于截图performance_start_trace的filePath原始 trace 落盘list_network_requests的resourceTypes、pageSize、pageIdx过滤加分页工具参考里有每个工具的完整参数。最后一句回扣项目设计原则把 Token-Optimized 放在第二条LCP was 3.2s 胜过五万行 JSON这也是所有工具按语义摘要返回的由来。想把参数逐个过一遍直接读src/config/mcp-options.ts的选项定义和src/tools/下的工具实现比任何二手总结都准。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 从全页截图到语义快照：Chrome DevTools MCP 省 token 的实操指南
从全页截图到语义快照Chrome DevTools MCP 省 token 的实操指南【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcpChrome DevTools MCP 让 AI 编码助手直接控制真实 Chrome做自动化、调试和性能分析。用起来第一个头疼的就是 token每次工具调用都往上下文塞数据对话又贵又慢。这篇文章是一套对着源码核过实的 Chrome DevTools MCP 令牌优化做法照着改就能生效。先让每次返回只带必要数据典型场景你让助手看看这个页面它回了一张全页截图PNG 体积不小再来三轮上下文窗口直接见底。更隐蔽的是截图、追踪这类重资产如果被内联返回几万行 JSON 会原封不动进上下文。用无障碍树文本快照替代全页截图take_snapshot基于 a11y 树生成文本快照工具描述里明确写了prefer snapshot over screenshot。默认不带verbose只列出必要元素个别超大页面可以用filePath落盘上下文里只留一个路径。省在哪一次几百字符的文本换掉一张整页图详见 快照工具。让大产物走文件别内联项目设计原则里有一条 Reference over Value截图、trace 这类重资产只返回文件路径不回传原始数据。evaluate_script、get_network_request、performance_stop_trace都支持filePath参数。省在哪几万行 JSON 躺在磁盘上不进上下文。这条原则原文在设计原则里。截图真要拍时压缩再加缩放--screenshot-format设jpeg或webp官方注释里写明体积约为 PNG 的 1/3 到 1/5再配--screenshot-max-width把宽度限下来。省在哪同样一张图上下文占用直接砍到几分之一。把多轮试探压成单轮第二个痛点是轮次。助手每探一步就要读一遍工具列表几十上百个工具的 schema 描述本身就是常驻开销网络请求、控制台日志这类列表不加过滤一次能回几百条。关掉用不到的工具类别--no-category-emulation、--no-category-network、--no-category-performance可以按类别摘掉工具只做基础浏览器任务时直接--slim只暴露导航、执行脚本、截图三个工具。省在哪每轮对话里工具清单的描述文本变短这是纯 MCP 服务器减少 token 消耗里最立竿见影的一招选项定义见 mcp-options。列表查询先过滤再分页list_network_requests支持resourceTypes只拉你要的类型配pageSize/pageIdx分页默认每页 20 条分页逻辑在 pagination.tslist_console_messages用types只抓 errorincludeStackTraces默认关着别把每条栈都拉上来实现见 console.ts。省在哪几百条请求缩成一页 20 条相关项。批量操作完再拍一次快照click、fill这类输入工具的includeSnapshot默认就是false。表单一次填完最后手动take_snapshot确认状态而不是每填一个字段回传一份快照。省在哪五步表单从五份页面数据变成一份。别为每次会话交浏览器启动税每次会话冷启动一个 Chrome加载、登录态、缓存全部重来时间和 token 双份烧。复用已经在跑的浏览器--autoConnectChrome 144直连本机正在运行的浏览器或者--browser-url、--ws-endpoint连已开调试端点的实例。省在哪会话之间浏览器常驻DevTools 自动化省 token 的隐藏大头其实是这些重复的启动和页面重加载。固定 profile 目录吃浏览器缓存默认 profile 在~/.cache/chrome-devtools-mcp同一站点反复调试时静态资源走缓存需要干净环境才用--isolated临时目录。省在哪少下载的字节少等的加载轮次。照这条流程走一遍性能排查navigate打开目标 URL。performance_start_trace起追踪autoStop默认 true自动重载并停止原始 trace 用filePath存盘实现见 performance.ts。看返回的语义摘要和 insights原始 trace 不进上下文。list_network_requests加resourceTypes过滤加分页挑最大请求用get_network_request的responseFilePath把大响应落盘。list_console_messages按types: [error]确认无 JS 报错。收尾take_snapshot一份文本快照确认最终状态。关键选项速查--slim只暴露导航、脚本执行、截图 3 个工具--no-category-emulation/--no-category-network/--no-category-performance关闭对应类别工具--autoConnect连接本机运行中的 Chrome 144--browser-url/--ws-endpoint连接已运行的调试实例--screenshot-format截图默认格式jpeg/webp 比 PNG 小 3-5 倍--screenshot-max-width/--screenshot-max-height截图按比例降采样--user-data-dir指定 profile 目录复用浏览器缓存take_snapshota11y 树文本快照优先于截图performance_start_trace的filePath原始 trace 落盘list_network_requests的resourceTypes、pageSize、pageIdx过滤加分页工具参考里有每个工具的完整参数。最后一句回扣项目设计原则把 Token-Optimized 放在第二条LCP was 3.2s 胜过五万行 JSON这也是所有工具按语义摘要返回的由来。想把参数逐个过一遍直接读src/config/mcp-options.ts的选项定义和src/tools/下的工具实现比任何二手总结都准。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考