1. 服务概述
一句话简介：让您的编码代理（如Gemini、Claude、Cursor或Copilot）控制和检查实时Chrome浏览器，通过Chrome DevTools提供可靠的自动化、深度调试和性能分析。
- 服务名称：Chrome DevTools MCP
- 版本号：最新版本
- 开发者/提供方：SHAY5555-gif
- 协议类型：MCP (Model Context Protocol)
2. 核心功能
列出该MCP服务提供的主要功能点：
- 性能洞察：使用Chrome DevTools记录跟踪并提取可操作的性能洞察
- 高级浏览器调试：分析网络请求、截图和检查浏览器控制台
- 可靠自动化：使用Puppeteer自动化Chrome操作并自动等待操作结果
- 输入自动化：点击、拖拽、填充、表单填充、处理对话框、悬停、上传文件
- 导航自动化：关闭页面、列出页面、导航页面、页面历史、新建页面、选择页面、等待
- 模拟功能：CPU模拟、网络模拟、页面大小调整
- 性能分析：性能洞察分析、开始跟踪、停止跟踪
- 网络检查：获取网络请求、列出网络请求
- 调试工具：执行脚本、列出控制台消息、截图、快照
3. 使用场景
描述该服务适合在什么情况下使用：
- 性能分析：分析网页加载性能、运行时性能，识别性能瓶颈
- 网页调试：调试网页问题，检查控制台消息和网络请求
- 浏览器自动化：自动化执行浏览器操作，如点击、填充表单、导航等
- 网络请求分析：检查和分析网络请求，了解API调用和数据传输
- 截图捕获：捕获网页截图用于文档或测试验证
- 响应式测试：调整视口大小测试响应式设计
- 性能回归测试：定期检查网页性能，识别性能回归
4. 接入方式
4.1 服务端点
Chrome DevTools MCP作为MCP服务器运行，通过标准输入输出进行通信。服务器使用Node.js运行，支持通过npx直接运行或连接到现有Chrome实例。
4.2 认证与权限
服务器支持连接到运行中的Chrome实例：
- 浏览器URL：通过
--browser-url选项连接到运行中的Chrome实例 - 远程调试端口：默认使用9222端口进行远程调试
- 安全警告：启用远程调试端口会打开调试端口，确保不要浏览敏感网站
4.3 数据格式
服务器使用JSON格式进行数据交换：
- 输入：JSON格式的参数对象，包含操作类型和相关参数
- 输出：操作结果、截图数据、性能数据或错误信息
4.4 服务器配置
在MCP客户端配置中添加服务（基本配置）：
{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }高级配置（使用Canary通道、无头模式、隔离模式）：
{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--channel=canary", "--headless=true", "--isolated=true" ] } } }5. 接口定义
5.1 输入自动化工具（7个）
| 工具名称 | 描述 |
|---|---|
| click | 点击元素 |
| drag | 拖拽元素 |
| fill | 填充输入字段 |
| fill_form | 填充整个表单 |
| handle_dialog | 处理对话框 |
| hover | 悬停在元素上 |
| upload_file | 上传文件 |
5.2 导航自动化工具（7个）
| 工具名称 | 描述 |
|---|---|
| close_page | 关闭页面 |
| list_pages | 列出所有页面 |
| navigate_page | 导航到URL |
| navigate_page_history | 导航历史（前进/后退） |
| new_page | 新建页面 |
| select_page | 选择页面 |
| wait_for | 等待条件 |
5.3 其他工具
| 类别 | 工具名称 | 描述 |
|---|---|---|
| 模拟 | emulate_cpu | CPU模拟 |
| 模拟 | emulate_network | 网络模拟 |
| 模拟 | resize_page | 调整页面大小 |
| 性能 | performance_analyze_insight | 分析性能洞察 |
| 性能 | performance_start_trace | 开始性能跟踪 |
| 性能 | performance_stop_trace | 停止性能跟踪 |
| 网络 | get_network_request | 获取网络请求 |
| 网络 | list_network_requests | 列出网络请求 |
| 调试 | evaluate_script | 执行脚本 |
| 调试 | list_console_messages | 列出控制台消息 |
| 调试 | take_screenshot | 截图 |
| 调试 | take_snapshot | 快照 |
6. 快速开始
6.1 环境要求
- Node.js v20.19或更新的最新维护LTS版本
- Chrome当前稳定版本或更新版本
- npm包管理器
6.2 示例代码
检查网页性能：
Check the performance of https://developers.chrome.com连接到运行中的Chrome实例：
步骤1：配置MCP客户端
{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }步骤2：启动Chrome浏览器（Windows）
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"7. 注意事项
- 安全警告：启用远程调试端口会打开调试端口，任何应用程序都可以连接并控制浏览器，确保不要浏览敏感网站
- 用户数据目录：Chrome要求在启用远程调试端口时使用非默认用户数据目录，使用
--user-data-dir标志指定自定义目录 - 沙箱限制：某些MCP客户端允许使用macOS Seatbelt或Linux容器沙箱化MCP服务器，如果启用沙箱，chrome-devtools-mcp无法启动Chrome，需要禁用沙箱或使用
--browser-url连接到手动启动的Chrome实例 - 版本要求：确保使用Node.js v20.19或更高版本，以及Chrome当前稳定版本或更新版本
- 配置选项：支持多种配置选项，如通道选择（stable、canary、beta、dev）、无头模式、隔离模式等
- 数据隐私：chrome-devtools-mcp向MCP客户端公开浏览器实例内容，避免共享不想与MCP客户端共享的敏感或个人信息
- 自动启动：MCP服务器会在MCP客户端使用需要运行浏览器实例的工具时自动启动浏览器，仅连接到Chrome DevTools MCP服务器不会自动启动浏览器
