ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Browser DevTools MCP MCP 服务说明文档

Browser DevTools MCP MCP 服务说明文档 1. 服务概述一句话简介提供直接访问Chrome DevTools Protocol (CDP)的最小MCP服务器实现最大灵活性的浏览器控制。服务名称Browser DevTools MCP版本号最新版本开发者/提供方Myestery协议类型MCP (Model Context Protocol)2. 核心功能列出该MCP服务提供的主要功能点原始CDP访问通过cdp_send直接调用任何Chrome DevTools Protocol方法截图捕获以PNG或JPEG格式捕获截图URL检索获取当前页面URL浏览器管理启动和关闭浏览器实例最大灵活性直接访问CDP实现最大的浏览器控制灵活性3. 使用场景描述该服务适合在什么情况下使用高级浏览器自动化需要直接使用Chrome DevTools Protocol进行高级浏览器控制网页截图捕获网页截图用于文档或测试验证页面导航导航到指定URL并获取页面信息DOM操作通过CDP直接操作DOM元素JavaScript执行在浏览器上下文中执行JavaScript代码性能分析使用CDP的性能分析工具进行网页性能分析网络监控监控和分析网络请求4. 接入方式4.1 服务端点Browser CDP MCP Server作为MCP服务器运行通过标准输入输出进行通信。服务器使用Node.js运行提供最小化的CDP访问接口。4.2 认证与权限服务器不需要特殊的认证配置直接启动浏览器实例即可使用。4.3 数据格式服务器使用JSON格式进行数据交换输入JSON格式的参数对象包含CDP方法名和参数输出CDP方法的返回结果或错误信息4.4 服务器配置在MCP客户端配置中添加服务claude mcp add-json browser { type: stdio, command: node, args: [path/to/browser-tool/server.js] } --scope user5. 接口定义工具名称描述参数cdp_send执行任何CDP方法method必需, params可选screenshot捕获当前页面截图format可选png/jpeg, fullPage可选get_url返回当前页面URL无close_browser关闭浏览器实例并清理资源无6. 快速开始6.1 环境要求Node.jsnpm包管理器相关依赖包modelcontextprotocol/sdk、playwright、zod6.2 示例代码导航到网页cdp_send({ method: Page.navigate, params: { url: https://example.com } })捕获截图screenshot({ format: png, fullPage: true })获取当前URLget_url()执行JavaScriptcdp_send({ method: Runtime.evaluate, params: { expression: document.title } })获取DOM文档cdp_send({ method: DOM.getDocument })7. 注意事项最小化设计服务器提供最小化的接口专注于直接访问CDPCDP参考使用CDP方法时参考Chrome DevTools Protocol官方文档https://chromedevtools.github.io/devtools-protocol/依赖包需要安装modelcontextprotocol/sdkMCP SDK、playwright浏览器自动化、zod模式验证许可证MIT许可证灵活性通过直接访问CDP可以实现最大灵活性的浏览器控制技能集成可以将浏览器技能添加到Claude增强浏览器控制能力通信方式服务器通过stdio使用MCP协议进行通信资源清理使用close_browser工具关闭浏览器实例并清理资源
返回列表