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 | 导航到特定URL |
| disconnect_from_browser | 断开与浏览器的连接 |
| get_connection_status | 检查连接状态 |
5.2 网络监控工具
| 工具名称 | 描述 |
|---|---|
| get_network_requests | 获取网络请求（支持过滤） |
| get_network_response | 获取详细的响应数据（包括body） |
5.3 控制台工具
| 工具名称 | 描述 |
|---|---|
| get_console_logs | 获取浏览器控制台日志 |
| get_console_error_summary | 获取错误和警告的组织摘要 |
| execute_javascript | 在浏览器上下文中执行JavaScript |
| clear_console | 清除浏览器控制台 |
| inspect_console_object | 深度检查任何JavaScript对象 |
| monitor_console_live | 实时监控控制台输出 |
5.4 页面分析和存储工具
| 工具名称 | 描述 |
|---|---|
| get_page_info | 获取全面的页面指标和性能数据 |
| get_performance_metrics | 获取详细的性能指标和资源计时 |
| get_all_cookies | 获取所有浏览器cookies |
| get_storage_usage_and_quota | 获取存储使用和配额信息 |
6. 快速开始
6.1 环境要求
- Python 3.x
- Chrome浏览器
- 相关Python依赖包
6.2 示例代码
一步启动Chrome并连接到应用：
start_chrome_and_connect("localhost:3000")调试API调用：
get_network_requests(filter_status=500) 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_domain="your-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，便于调试身份验证问题
