chrome-devtools-mcp Slim 模式解析三个工具构成的极简浏览器自动化工具集【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp在 chrome-devtools-mcp 中除了覆盖导航、输入、网络、性能、内存、Lighthouse 等十余个类别的完整工具集外还提供了一套名为 slim精简模式的工具集只暴露navigate、evaluate、screenshot三个工具覆盖打开页面、执行脚本、截图取证这类最基础的浏览器任务。本篇以自动生成的 docs/slim-tool-reference.md 为骨架结合 src/tools/slim/tools.ts 的源码实现与 tests/tools/slim/tools.test.ts 的测试用例完整讲解 slim 工具集的每个参数、底层调用链以及它在全量模式与精简模式之间的行为差异帮助你在为 coding agent 配置 MCP 客户端时做出合适的取舍。什么是 Slim 模式docs/slim-tool-reference.md 是一份自动生成的工具参考文档文件首行标注AUTO GENERATED DO NOT EDIT需运行npm run gen更新它列出了 slim 模式下全部可用工具类别工具说明参数Navigation automationnavigateLoads a URL加载一个 URLurlstring必填DebuggingevaluateEvaluates a JavaScript script执行一段 JavaScriptscriptstring必填DebuggingscreenshotTakes a screenshot截取当前页面截图无三个工具分别对应一次浏览器任务循环的三个环节先navigate打开目标页面再用evaluate在页面上下文里执行任意脚本读 DOM、断言状态、触发点击等最后用screenshot落盘一张 PNG 作为证据或反馈。启用方式是给 MCP 服务进程加上--slim参数。这一参数在 src/config/mcp-options.ts 中定义slim: { type: boolean, describe: Exposes a slim set of 3 tools covering navigation, script execution and screenshots only. Useful for basic browser tasks., },因此在 MCP 客户端配置中如 Claude Desktop、Cursor 等的mcp.json只需在 args 中追加--slim{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest, --slim] } } }工具的选择逻辑在 src/tools/tools.ts 的createTools中一目了然export const createTools (args: ParsedArguments) { const rawTools args.slim ? Object.values(slimTools) // slim仅 slim/tools.ts 中导出的 3 个工具 : [ // 完整模式console、emulation、input、 ...Object.values(consoleTools), // network、performance、memory、 ...Object.values(emulationTools), // lighthouse、screencast、pwa、 // ... 共 16 个工具模块 ]; // ...按名称排序后返回 };也就是说 slim 模式并不是全量工具集加过滤条件而是走一条完全独立的工具注册路径——服务启动时src/index.ts 的#init只注册这 3 个工具客户端在 MCPtools/list中看到的就只有它们。工具数量减少直接带来三个实际收益更小的上下文占用MCP 客户端每次会话都要携带全部工具的 schema 与描述3 个工具远低于 16 个模块的全量集合对 agent 的 prompt 预算更友好更小的攻击面不暴露网络抓包、脚本注入到任意扩展、PWA 安装、堆快照分析等能力更简单的行为模型如下文所述slim 模式下pageId路由等复杂机制被整体关闭。工具逐一解析slim 模式下的三个工具都在 src/tools/slim/tools.ts 中通过definePageTool定义。它们带有pageScoped: true标记见 src/tools/ToolDefinition.ts意味着执行时由框架自动绑定一个当前页面。navigate加载一个 URL// src/tools/slim/tools.ts export const navigate definePageTool(args { return { name: navigate, description: Loads a URL, annotations: { category: ToolCategory.NAVIGATION, readOnlyHint: false, }, schema: { url: zod.string().describe(URL to navigate to), }, blockedByDialog: false, handler: async (request, response) { validateUrl(request.params.url, { javascriptEvaluation: args?.javascriptEvaluation, categoryExtensions: args?.categoryExtensions, }); const options {timeout: 30_000}; // ... 监听并自动接受 beforeunload 弹窗然后 goto }, }; });关键实现细节URL 校验前置调用page.pptrPage.goto之前先用validateUrl实现于 src/utils/url.ts按 URL 标准校验。校验失败会抛出形如Invalid URL: not a valid url. URLs must be valid according to the URL standard.的错误——这一行为由 tests/tools/slim/tools.test.ts 中的用例明确验证。30 秒导航超时goto固定使用timeout: 30_000毫秒的选项。beforeunload 弹窗自动接受导航期间页面常会弹出beforeunload确认框确定要离开吗handler 临时注册dialog事件监听器遇到beforeunload时自动accept并提示Accepted a beforeunload dialog.随后在finally中解绑监听。这也解释了为何navigate的blockedByDialog为false——它必须能在有弹窗时继续工作。协议限制与安全联动navigate是一个工厂函数接收args当服务以--no-javascript-evaluation启动时javascript:、data:、vbscript:三类 URL 会被拒绝报错Navigating to javascript: URLs is not allowed when JavaScript evaluation is disabled.。测试文件 tests/tools/slim/tools.test.ts 用parseArguments(..., [node, script.js, --slim, --no-javascript-evaluation])构造禁用参数后逐一验证了这三种协议的拦截。返回值成功后向响应追加Navigated to 最终URL.其中 URL 取page.pptrPage.url()即重定向完成后的真实地址。evaluate在页面上下文执行 JavaScript// src/tools/slim/tools.ts export const evaluate definePageTool({ name: evaluate, description: Evaluates a JavaScript script, annotations: { category: ToolCategory.DEBUGGING, readOnlyHint: false, conditions: [javascriptEvaluation], }, schema: { script: zod.string().describe(JS script to run on the page), }, blockedByDialog: true, handler: async (request, response) { const page request.page; try { const result await page.pptrPage.evaluate(request.params.script); response.appendResponseLine(JSON.stringify(result)); } catch (err) { response.appendResponseLine(String(err.message)); } }, });参数scriptstring必填即要执行在页面主世界里的 JS 脚本字符串。条件注册conditions: [javascriptEvaluation]表示该工具与--javascript-evaluation开关联动——禁用 JS 执行时evaluate会被整体下线src/config/mcp-options.ts 中该开关的描述明确提到 evaluation tools (evaluate_script and slim evaluate) are disabled。这是 slim 工具集中唯一受条件约束的工具。结果序列化执行结果经JSON.stringify后作为一行文本返回。这意味着返回的是可 JSON 化的值若脚本抛错捕获的是err.message字符串而非让调用直接失败便于 agent 读取错误信息后继续推理。测试用例2 * 5与throw new Error(test error)见 tests/tools/slim/tools.test.ts分别覆盖了这两种路径。readOnlyHint: falseevaluate可以改写页面状态因此不被标记为只读。screenshot截取当前页面并落盘// src/tools/slim/tools.ts export const screenshot definePageTool({ name: screenshot, description: Takes a screenshot, annotations: { category: ToolCategory.DEBUGGING, // Not read-only due to filePath param. readOnlyHint: false, }, schema: {}, blockedByDialog: true, handler: async (request, response, context) { const page request.page; const screenshot await page.pptrPage.screenshot({ type: png, optimizeForSpeed: true, }); const {filepath} await context.saveTemporaryFile( screenshot, screenshot.png, ); response.appendResponseLine(filepath); }, });无参数工具 schema 为空对象{}这是 slim 参考文档中唯一标注 Parameters: None 的工具。对比完整模式的take_screenshot支持filePath、fullPage、format等参数见 src/tools/screenshot.tsslim 版是一个刻意的最小化实现固定 PNG 格式、固定optimizeForSpeed: true牺牲部分压缩率换取编码速度。返回本地文件路径截图不是以 base64 内嵌返回而是通过context.saveTemporaryFile保存为临时文件screenshot.png响应中只追加文件路径一行。这一行为与 slim 模式的整体响应策略一致见下一节。blockedByDialog: true若页面上有未处理的弹窗该工具会先报错而不是静默执行——弹窗会遮挡页面内容此时截图没有意义。Slim 模式的响应模型与调用链差异slim 模式与完整模式最大的内部差异在响应对象。src/ToolHandler.ts 中按参数分叉const response this.serverArgs.slim ? new SlimMcpResponse(this.serverArgs) : new McpResponse(this.serverArgs);Src/SlimMcpResponse.ts 继承自McpResponse但重写了handleoverride async handle(_context: McpContext): Promise{ content: ArrayTextContent | ImageContent; structuredContent: object; } { const text: TextContent { type: text, text: this.responseLines.join(\n), }; return { content: [text], structuredContent: text, }; }完整模式的McpResponse会输出结构化内容页面列表、网络请求表、控制台消息、堆快照统计、附带的图片等接口面见 src/tools/ToolDefinition.ts 的Response接口而SlimMcpResponse只把工具通过appendResponseLine累积的文本行用换行符拼接成一个纯text内容块返回。也就是说 slim 模式下所有工具的结果都是纯文本行——Navigated to ...、10evaluate 结果、/tmp/.../screenshot.png截图路径没有分页、附件或结构化字段进一步压低了客户端的解析与 token 成本。另一个差异是pageId 路由在 slim 模式不可用。src/ToolHandler.ts 构造输入 schema 时this.inputSchema pageScoped in tool tool.pageScoped serverArgs.pageIdRouting !serverArgs.slim ? {...pageIdSchema, ...tool.schema} : tool.schema;完整模式开启--page-id-routing后页面作用域工具会自动附加pageId参数用于在多个标签页间寻址slim 模式则显式排除在路由之外执行时src/ToolHandler.ts统一取context.getSelectedMcpPage()即当前选中的页面。因此 slim 模式的心智模型非常线性一个页面、顺序执行、纯文本结果。此外src/index.ts 的logDisclaimers对 slim 模式做了降噪只有!args.slim args.performanceCrux才打印 CrUX 数据外发提示只有!args.slim args.usageStatistics才打印使用统计提示——slim 场景下这两类与完整工具集强绑定的告警不会出现。slim 开关本身也作为遥测维度被记录src/telemetry/flag_usage_metrics.json 中的slim/slim_present指标。安全相关的配合参数slim 工具集虽然小但与两个安全开关有明确的联动关系配置时应一并考虑--no-javascript-evaluation禁用 JS 执行。效果包括evaluate工具整体下线、navigate拒绝javascript:/data:/vbscript:URL前文已述。适合只需打开和看不需要动的场景。--blocked-url-pattern/--allowed-url-patternURL 黑名单/白名单在 src/index.ts 中解析为 blocklist/allowlist 传给浏览器上下文与 slim 模式的navigate同样生效可作为额外的访问边界。验证与测试slim 工具集的测试集中在 tests/tools/slim/tools.test.ts基于node:test与快照断言覆盖了以下路径evaluate正常执行2 * 5与异常执行throw new Error(...)的响应文本快照navigate导航到data:text/html,divHello MCP/div后校验document.querySelector(div)?.textContent为Hello MCP并确认响应不携带页面列表!response.includePagesnavigate对非法 URL 抛出Invalid URL错误--slim --no-javascript-evaluation组合下javascript:与data:URL 被拒绝。如果你想自行验证 slim 模式暴露的工具面可以直接以--slim参数启动服务用任意 MCP 客户端查看tools/list应只返回navigate、evaluate、screenshot三个工具在禁用 JS 执行时仅剩navigate与screenshot。小结slim 模式是 chrome-devtools-mcp 面向基础浏览器任务的极简工具面navigate负责加载 URL含 URL 校验、30 秒超时、beforeunload 自动接受evaluate负责在页面里执行 JS 并返回 JSON 化结果screenshot负责把页面落盘为 PNG 临时文件并返回路径。从源码结构看slim 模式的精简体现在三个层面——工具注册只取 src/tools/slim/tools.ts 的三个导出、响应统一走纯文本的SlimMcpResponse、页面路由等复杂机制被!serverArgs.slim判断整体旁路。当你只需要让 agent 完成打开页面、跑一段脚本、留一张证据图时加上--slim即可获得一个工具面干净、行为线性、上下文开销小得多的 MCP 服务需要网络分析、性能追踪、输入模拟或内存调试时再切换回完整工具集即可。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
chrome-devtools-mcp Slim 模式解析三个工具构成的极简浏览器自动化工具集【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp在 chrome-devtools-mcp 中除了覆盖导航、输入、网络、性能、内存、Lighthouse 等十余个类别的完整工具集外还提供了一套名为 slim精简模式的工具集只暴露navigate、evaluate、screenshot三个工具覆盖打开页面、执行脚本、截图取证这类最基础的浏览器任务。本篇以自动生成的 docs/slim-tool-reference.md 为骨架结合 src/tools/slim/tools.ts 的源码实现与 tests/tools/slim/tools.test.ts 的测试用例完整讲解 slim 工具集的每个参数、底层调用链以及它在全量模式与精简模式之间的行为差异帮助你在为 coding agent 配置 MCP 客户端时做出合适的取舍。什么是 Slim 模式docs/slim-tool-reference.md 是一份自动生成的工具参考文档文件首行标注AUTO GENERATED DO NOT EDIT需运行npm run gen更新它列出了 slim 模式下全部可用工具类别工具说明参数Navigation automationnavigateLoads a URL加载一个 URLurlstring必填DebuggingevaluateEvaluates a JavaScript script执行一段 JavaScriptscriptstring必填DebuggingscreenshotTakes a screenshot截取当前页面截图无三个工具分别对应一次浏览器任务循环的三个环节先navigate打开目标页面再用evaluate在页面上下文里执行任意脚本读 DOM、断言状态、触发点击等最后用screenshot落盘一张 PNG 作为证据或反馈。启用方式是给 MCP 服务进程加上--slim参数。这一参数在 src/config/mcp-options.ts 中定义slim: { type: boolean, describe: Exposes a slim set of 3 tools covering navigation, script execution and screenshots only. Useful for basic browser tasks., },因此在 MCP 客户端配置中如 Claude Desktop、Cursor 等的mcp.json只需在 args 中追加--slim{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest, --slim] } } }工具的选择逻辑在 src/tools/tools.ts 的createTools中一目了然export const createTools (args: ParsedArguments) { const rawTools args.slim ? Object.values(slimTools) // slim仅 slim/tools.ts 中导出的 3 个工具 : [ // 完整模式console、emulation、input、 ...Object.values(consoleTools), // network、performance、memory、 ...Object.values(emulationTools), // lighthouse、screencast、pwa、 // ... 共 16 个工具模块 ]; // ...按名称排序后返回 };也就是说 slim 模式并不是全量工具集加过滤条件而是走一条完全独立的工具注册路径——服务启动时src/index.ts 的#init只注册这 3 个工具客户端在 MCPtools/list中看到的就只有它们。工具数量减少直接带来三个实际收益更小的上下文占用MCP 客户端每次会话都要携带全部工具的 schema 与描述3 个工具远低于 16 个模块的全量集合对 agent 的 prompt 预算更友好更小的攻击面不暴露网络抓包、脚本注入到任意扩展、PWA 安装、堆快照分析等能力更简单的行为模型如下文所述slim 模式下pageId路由等复杂机制被整体关闭。工具逐一解析slim 模式下的三个工具都在 src/tools/slim/tools.ts 中通过definePageTool定义。它们带有pageScoped: true标记见 src/tools/ToolDefinition.ts意味着执行时由框架自动绑定一个当前页面。navigate加载一个 URL// src/tools/slim/tools.ts export const navigate definePageTool(args { return { name: navigate, description: Loads a URL, annotations: { category: ToolCategory.NAVIGATION, readOnlyHint: false, }, schema: { url: zod.string().describe(URL to navigate to), }, blockedByDialog: false, handler: async (request, response) { validateUrl(request.params.url, { javascriptEvaluation: args?.javascriptEvaluation, categoryExtensions: args?.categoryExtensions, }); const options {timeout: 30_000}; // ... 监听并自动接受 beforeunload 弹窗然后 goto }, }; });关键实现细节URL 校验前置调用page.pptrPage.goto之前先用validateUrl实现于 src/utils/url.ts按 URL 标准校验。校验失败会抛出形如Invalid URL: not a valid url. URLs must be valid according to the URL standard.的错误——这一行为由 tests/tools/slim/tools.test.ts 中的用例明确验证。30 秒导航超时goto固定使用timeout: 30_000毫秒的选项。beforeunload 弹窗自动接受导航期间页面常会弹出beforeunload确认框确定要离开吗handler 临时注册dialog事件监听器遇到beforeunload时自动accept并提示Accepted a beforeunload dialog.随后在finally中解绑监听。这也解释了为何navigate的blockedByDialog为false——它必须能在有弹窗时继续工作。协议限制与安全联动navigate是一个工厂函数接收args当服务以--no-javascript-evaluation启动时javascript:、data:、vbscript:三类 URL 会被拒绝报错Navigating to javascript: URLs is not allowed when JavaScript evaluation is disabled.。测试文件 tests/tools/slim/tools.test.ts 用parseArguments(..., [node, script.js, --slim, --no-javascript-evaluation])构造禁用参数后逐一验证了这三种协议的拦截。返回值成功后向响应追加Navigated to 最终URL.其中 URL 取page.pptrPage.url()即重定向完成后的真实地址。evaluate在页面上下文执行 JavaScript// src/tools/slim/tools.ts export const evaluate definePageTool({ name: evaluate, description: Evaluates a JavaScript script, annotations: { category: ToolCategory.DEBUGGING, readOnlyHint: false, conditions: [javascriptEvaluation], }, schema: { script: zod.string().describe(JS script to run on the page), }, blockedByDialog: true, handler: async (request, response) { const page request.page; try { const result await page.pptrPage.evaluate(request.params.script); response.appendResponseLine(JSON.stringify(result)); } catch (err) { response.appendResponseLine(String(err.message)); } }, });参数scriptstring必填即要执行在页面主世界里的 JS 脚本字符串。条件注册conditions: [javascriptEvaluation]表示该工具与--javascript-evaluation开关联动——禁用 JS 执行时evaluate会被整体下线src/config/mcp-options.ts 中该开关的描述明确提到 evaluation tools (evaluate_script and slim evaluate) are disabled。这是 slim 工具集中唯一受条件约束的工具。结果序列化执行结果经JSON.stringify后作为一行文本返回。这意味着返回的是可 JSON 化的值若脚本抛错捕获的是err.message字符串而非让调用直接失败便于 agent 读取错误信息后继续推理。测试用例2 * 5与throw new Error(test error)见 tests/tools/slim/tools.test.ts分别覆盖了这两种路径。readOnlyHint: falseevaluate可以改写页面状态因此不被标记为只读。screenshot截取当前页面并落盘// src/tools/slim/tools.ts export const screenshot definePageTool({ name: screenshot, description: Takes a screenshot, annotations: { category: ToolCategory.DEBUGGING, // Not read-only due to filePath param. readOnlyHint: false, }, schema: {}, blockedByDialog: true, handler: async (request, response, context) { const page request.page; const screenshot await page.pptrPage.screenshot({ type: png, optimizeForSpeed: true, }); const {filepath} await context.saveTemporaryFile( screenshot, screenshot.png, ); response.appendResponseLine(filepath); }, });无参数工具 schema 为空对象{}这是 slim 参考文档中唯一标注 Parameters: None 的工具。对比完整模式的take_screenshot支持filePath、fullPage、format等参数见 src/tools/screenshot.tsslim 版是一个刻意的最小化实现固定 PNG 格式、固定optimizeForSpeed: true牺牲部分压缩率换取编码速度。返回本地文件路径截图不是以 base64 内嵌返回而是通过context.saveTemporaryFile保存为临时文件screenshot.png响应中只追加文件路径一行。这一行为与 slim 模式的整体响应策略一致见下一节。blockedByDialog: true若页面上有未处理的弹窗该工具会先报错而不是静默执行——弹窗会遮挡页面内容此时截图没有意义。Slim 模式的响应模型与调用链差异slim 模式与完整模式最大的内部差异在响应对象。src/ToolHandler.ts 中按参数分叉const response this.serverArgs.slim ? new SlimMcpResponse(this.serverArgs) : new McpResponse(this.serverArgs);Src/SlimMcpResponse.ts 继承自McpResponse但重写了handleoverride async handle(_context: McpContext): Promise{ content: ArrayTextContent | ImageContent; structuredContent: object; } { const text: TextContent { type: text, text: this.responseLines.join(\n), }; return { content: [text], structuredContent: text, }; }完整模式的McpResponse会输出结构化内容页面列表、网络请求表、控制台消息、堆快照统计、附带的图片等接口面见 src/tools/ToolDefinition.ts 的Response接口而SlimMcpResponse只把工具通过appendResponseLine累积的文本行用换行符拼接成一个纯text内容块返回。也就是说 slim 模式下所有工具的结果都是纯文本行——Navigated to ...、10evaluate 结果、/tmp/.../screenshot.png截图路径没有分页、附件或结构化字段进一步压低了客户端的解析与 token 成本。另一个差异是pageId 路由在 slim 模式不可用。src/ToolHandler.ts 构造输入 schema 时this.inputSchema pageScoped in tool tool.pageScoped serverArgs.pageIdRouting !serverArgs.slim ? {...pageIdSchema, ...tool.schema} : tool.schema;完整模式开启--page-id-routing后页面作用域工具会自动附加pageId参数用于在多个标签页间寻址slim 模式则显式排除在路由之外执行时src/ToolHandler.ts统一取context.getSelectedMcpPage()即当前选中的页面。因此 slim 模式的心智模型非常线性一个页面、顺序执行、纯文本结果。此外src/index.ts 的logDisclaimers对 slim 模式做了降噪只有!args.slim args.performanceCrux才打印 CrUX 数据外发提示只有!args.slim args.usageStatistics才打印使用统计提示——slim 场景下这两类与完整工具集强绑定的告警不会出现。slim 开关本身也作为遥测维度被记录src/telemetry/flag_usage_metrics.json 中的slim/slim_present指标。安全相关的配合参数slim 工具集虽然小但与两个安全开关有明确的联动关系配置时应一并考虑--no-javascript-evaluation禁用 JS 执行。效果包括evaluate工具整体下线、navigate拒绝javascript:/data:/vbscript:URL前文已述。适合只需打开和看不需要动的场景。--blocked-url-pattern/--allowed-url-patternURL 黑名单/白名单在 src/index.ts 中解析为 blocklist/allowlist 传给浏览器上下文与 slim 模式的navigate同样生效可作为额外的访问边界。验证与测试slim 工具集的测试集中在 tests/tools/slim/tools.test.ts基于node:test与快照断言覆盖了以下路径evaluate正常执行2 * 5与异常执行throw new Error(...)的响应文本快照navigate导航到data:text/html,divHello MCP/div后校验document.querySelector(div)?.textContent为Hello MCP并确认响应不携带页面列表!response.includePagesnavigate对非法 URL 抛出Invalid URL错误--slim --no-javascript-evaluation组合下javascript:与data:URL 被拒绝。如果你想自行验证 slim 模式暴露的工具面可以直接以--slim参数启动服务用任意 MCP 客户端查看tools/list应只返回navigate、evaluate、screenshot三个工具在禁用 JS 执行时仅剩navigate与screenshot。小结slim 模式是 chrome-devtools-mcp 面向基础浏览器任务的极简工具面navigate负责加载 URL含 URL 校验、30 秒超时、beforeunload 自动接受evaluate负责在页面里执行 JS 并返回 JSON 化结果screenshot负责把页面落盘为 PNG 临时文件并返回路径。从源码结构看slim 模式的精简体现在三个层面——工具注册只取 src/tools/slim/tools.ts 的三个导出、响应统一走纯文本的SlimMcpResponse、页面路由等复杂机制被!serverArgs.slim判断整体旁路。当你只需要让 agent 完成打开页面、跑一段脚本、留一张证据图时加上--slim即可获得一个工具面干净、行为线性、上下文开销小得多的 MCP 服务需要网络分析、性能追踪、输入模拟或内存调试时再切换回完整工具集即可。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
