ARTICLE DETAIL

资讯详情

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

Chrome MCP Server MCP 服务说明文档

Chrome MCP Server MCP 服务说明文档 1. 服务概述一句话简介通过MCP提供Chrome DevTools Protocol集成允许您通过连接到Chrome的开发者工具来调试Web应用程序。服务名称Chrome MCP Server版本号最新版本开发者/提供方benjaminr协议类型MCP (Model Context Protocol)2. 核心功能列出该MCP服务提供的主要功能点网络监控捕获和分析HTTP请求/响应支持过滤选项控制台集成读取浏览器控制台日志、分析错误、执行JavaScript性能指标计时数据、资源加载和内存利用率页面检查DOM信息、页面指标和多框架支持存储访问读取cookies、localStorage和sessionStorage实时监控实时控制台输出跟踪对象检查检查JavaScript对象和变量DOM元素检查查询元素、获取属性、搜索元素等CSS样式分析计算样式、匹配样式、媒体查询分析等3. 使用场景描述该服务适合在什么情况下使用调试API调用当Web应用程序的API调用失败或返回意外数据时进行调试检查JavaScript控制台错误当Web应用程序有JavaScript错误或意外行为时检查性能调试当Web应用程序加载缓慢或使用过多内存时分析性能调试身份验证问题当登录或会话管理不工作时调试DOM元素检查检查和操作DOM元素CSS样式分析分析和调试CSS样式问题4. 接入方式4.1 服务端点Chrome DevTools MCP作为MCP服务器运行通过标准输入输出进行通信。服务器使用Python运行支持多种安装方式。4.2 认证与权限服务器支持连接到Chrome实例Chrome调试端口默认使用9222端口可通过环境变量CHROME_DEBUG_PORT配置自动启动Chrome支持自动启动Chrome并启用调试功能连接现有Chrome支持连接到已运行的Chrome实例4.3 数据格式服务器使用JSON格式进行数据交换输入JSON格式的参数对象包含操作类型和相关参数输出操作结果、网络请求数据、控制台日志或错误信息4.4 服务器配置在Claude Desktop配置文件中添加服务{ mcpServers: { chrome-devtools: { command: python, args: [/absolute/path/to/chrome-devtools-mcp/server.py], env: { CHROME_DEBUG_PORT: 9222 } } } }5. 接口定义5.1 Chrome管理工具工具名称描述start_chrome启动Chrome并启用远程调试start_chrome_and_connect一步启动Chrome、连接并导航connect_to_browser连接到现有Chrome实例navigate_to_url导航到特定URLdisconnect_from_browser断开与浏览器的连接get_connection_status检查连接状态5.2 网络监控工具工具名称描述get_network_requests获取网络请求支持过滤get_network_response获取详细的响应数据包括body5.3 控制台工具工具名称描述get_console_logs获取浏览器控制台日志get_console_error_summary获取错误和警告的组织摘要execute_javascript在浏览器上下文中执行JavaScriptclear_console清除浏览器控制台inspect_console_object深度检查任何JavaScript对象monitor_console_live实时监控控制台输出5.4 页面分析和存储工具工具名称描述get_page_info获取全面的页面指标和性能数据get_performance_metrics获取详细的性能指标和资源计时get_all_cookies获取所有浏览器cookiesget_storage_usage_and_quota获取存储使用和配额信息6. 快速开始6.1 环境要求Python 3.xChrome浏览器相关Python依赖包6.2 示例代码一步启动Chrome并连接到应用start_chrome_and_connect(localhost:3000)调试API调用get_network_requests(filter_status500) get_network_response(request-123)检查JavaScript控制台错误get_console_error_summary() monitor_console_live(15)性能调试get_page_info() get_performance_metrics()调试身份验证问题get_cookies() get_network_requests(filter_domainyour-api.com) execute_javascript(Object.keys(localStorage))7. 注意事项安装方式支持Claude Desktop扩展.dxt文件、MCP CLI、Claude Code集成和手动配置四种安装方式推荐安装Claude Desktop扩展是最简单的安装方式包含所有依赖可立即使用路径问题Claude Code需要Python解释器和服务器脚本的绝对路径才能正常工作Chrome调试端口默认使用9222端口可通过环境变量CHROME_DEBUG_PORT配置一步设置推荐使用start_chrome_and_connect命令一步完成启动、连接和导航实时监控支持实时监控控制台输出便于调试交互式应用对象检查支持深度检查JavaScript对象和变量便于调试应用状态性能分析提供详细的性能指标和资源计时数据便于性能优化存储访问支持访问cookies、localStorage和sessionStorage便于调试身份验证问题
返回列表