尧图网站建设 
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-mcplatest] } } }高级配置使用Canary通道、无头模式、隔离模式{ mcpServers: { chrome-devtools: { command: npx, args: [ chrome-devtools-mcplatest, --channelcanary, --headlesstrue, --isolatedtrue ] } } }5. 接口定义5.1 输入自动化工具7个工具名称描述click点击元素drag拖拽元素fill填充输入字段fill_form填充整个表单handle_dialog处理对话框hover悬停在元素上upload_file上传文件5.2 导航自动化工具7个工具名称描述close_page关闭页面list_pages列出所有页面navigate_page导航到URLnavigate_page_history导航历史前进/后退new_page新建页面select_page选择页面wait_for等待条件5.3 其他工具类别工具名称描述模拟emulate_cpuCPU模拟模拟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-mcplatest, --browser-urlhttp://127.0.0.1:9222 ] } } }步骤2启动Chrome浏览器WindowsC:\Program Files\Google\Chrome\Application\chrome.exe --remote-debugging-port9222 --user-data-dir%TEMP%\chrome-profile-stable7. 注意事项安全警告启用远程调试端口会打开调试端口任何应用程序都可以连接并控制浏览器确保不要浏览敏感网站用户数据目录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服务器不会自动启动浏览器 Chrome DevTools MCP MCP 服务说明文档
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-mcplatest] } } }高级配置使用Canary通道、无头模式、隔离模式{ mcpServers: { chrome-devtools: { command: npx, args: [ chrome-devtools-mcplatest, --channelcanary, --headlesstrue, --isolatedtrue ] } } }5. 接口定义5.1 输入自动化工具7个工具名称描述click点击元素drag拖拽元素fill填充输入字段fill_form填充整个表单handle_dialog处理对话框hover悬停在元素上upload_file上传文件5.2 导航自动化工具7个工具名称描述close_page关闭页面list_pages列出所有页面navigate_page导航到URLnavigate_page_history导航历史前进/后退new_page新建页面select_page选择页面wait_for等待条件5.3 其他工具类别工具名称描述模拟emulate_cpuCPU模拟模拟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-mcplatest, --browser-urlhttp://127.0.0.1:9222 ] } } }步骤2启动Chrome浏览器WindowsC:\Program Files\Google\Chrome\Application\chrome.exe --remote-debugging-port9222 --user-data-dir%TEMP%\chrome-profile-stable7. 注意事项安全警告启用远程调试端口会打开调试端口任何应用程序都可以连接并控制浏览器确保不要浏览敏感网站用户数据目录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服务器不会自动启动浏览器