Chrome DevTools MCP - 让AI编程助手拥有浏览器自动化超能力

革命性的浏览器自动化解决方案

Chrome DevTools MCP 是谷歌官方推出的 Model Context Protocol 服务器，让 Cursor、Claude、Copilot 等 AI 编程助手能够直接控制和调试 Chrome 浏览器，实现前所未有的浏览器自动化体验。

⚡

性能洞察分析

利用 Chrome DevTools 录制性能追踪，提取可操作的性能洞察，帮助开发者优化网页性能和用户体验。

🤖

可靠的浏览器自动化

基于 Puppeteer 实现的智能浏览器自动化，自动等待操作结果，确保自动化脚本的稳定性和可靠性。

🔍

高级浏览器调试

分析网络请求、截取页面截图、检查浏览器控制台，提供全方位的浏览器调试和监控能力。

强大的工具集合

Chrome DevTools MCP 提供了 26 个专业工具，涵盖输入自动化、导航控制、性能分析、网络监控和调试等各个方面。

🎯 输入自动化 (7个工具)

click - 点击页面元素
drag - 拖拽元素操作
fill - 填写表单字段
fill_form - 批量填写表单
handle_dialog - 处理浏览器对话框
hover - 鼠标悬停操作
upload_file - 文件上传功能

🧭 导航自动化 (7个工具)

navigate_page - 页面导航
new_page - 创建新页面
close_page - 关闭页面
list_pages - 列出所有页面
select_page - 选择活动页面
navigate_page_history - 历史导航
wait_for - 等待页面元素

⚡ 性能分析 (3个工具)

performance_start_trace - 开始性能追踪
performance_stop_trace - 停止性能追踪
performance_analyze_insight - 分析性能洞察

🌐 网络监控 (2个工具)

list_network_requests - 列出网络请求
get_network_request - 获取请求详情

🔧 调试工具 (4个工具)

take_screenshot - 截取页面截图
take_snapshot - 获取页面快照
evaluate_script - 执行JavaScript
list_console_messages - 查看控制台消息

🎭 环境模拟 (3个工具)

emulate_cpu - CPU性能模拟
emulate_network - 网络条件模拟
resize_page - 调整页面尺寸

快速安装配置

只需几步简单配置，即可在您喜爱的 AI 编程助手中启用 Chrome DevTools MCP 功能。

📋 系统要求

• Node.js 22.12.0 或更新版本
• Chrome 浏览器当前稳定版本或更新版本
• npm 包管理器

⚙️ MCP 客户端配置

在您的 MCP 客户端配置文件中添加以下配置：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

🎯 支持的AI编程助手

Claude Code
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cursor
一键安装按钮

VS Code Copilot
code --add-mcp

Gemini CLI
gemini mcp add

实际应用场景

Chrome DevTools MCP 可以帮助您在各种场景下实现智能化的浏览器操作和分析。

📊

网站性能分析

自动访问网站并生成详细的性能报告，识别性能瓶颈，提供优化建议，帮助提升用户体验。

检查 https://example.com 的性能表现

🔄

表单自动化填写

智能识别表单字段并自动填写，支持复杂的多步骤表单操作，大幅提升测试和数据录入效率。

自动填写注册表单并提交申请

🐛

网页调试分析

监控网络请求、分析控制台错误、截取页面状态，为开发者提供全面的调试信息。

分析页面加载错误并生成调试报告

智能浏览器接管机制

Chrome DevTools MCP 提供灵活的浏览器控制方式，支持持久化登录状态和多种连接模式。

🍪 登录状态保持

MCP 使用独立的用户数据目录，登录状态在会话间持久保存：

• 淘宝、京东等电商平台免重复登录
• 社交媒体账号状态自动保持
• 企业内部系统 SSO 状态延续
• Cookie 和本地存储完整保留

💡 首次登录后，AI 可直接操作已登录的账户，无需重复输入密码

🔗 多种连接模式

灵活的浏览器实例管理，适应不同使用场景：

• 独立实例：默认模式，启动专用Chrome
• 连接现有：通过 --browserUrl 接管本地浏览器
• 隔离模式：--isolated 创建临时环境
• 远程调试：连接远程Chrome实例

⚠️ 连接现有浏览器时，AI 可访问所有已登录的账户和数据

📁 用户数据目录位置

Linux / macOS
$HOME/.cache/chrome-devtools-mcp/chrome-profile-stable

Windows
%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-stable

真实世界应用场景

基于持久化登录状态，AI 可以执行复杂的业务流程自动化任务。

🛒

电商自动化操作

利用保存的登录状态，AI 可以自动浏览商品、加入购物车、填写订单信息，甚至完成整个购买流程的测试验证。

在淘宝搜索"机械键盘"，找到价格在500-1000元的商品，加入购物车并模拟下单流程

📊

社交媒体内容管理

自动发布内容、回复评论、分析互动数据，基于已登录的社交媒体账户执行内容运营任务。

将这篇博客文章改写成微博内容并自动发布，同时截图保存发布结果

🏢

企业系统自动化

在企业内部系统中执行数据录入、报表生成、流程审批等重复性任务，提升办公效率。

登录OA系统，查看待审批的请假申请，按照公司政策自动处理并记录结果

技术架构与特性

基于现代化技术栈构建，提供稳定可靠的浏览器自动化解决方案。

🏗️ 核心技术栈

• TypeScript 97.1% - 类型安全的开发体验
• Puppeteer Core - 强大的浏览器控制引擎
• Model Context Protocol SDK - 标准化的AI集成
• Chrome DevTools Frontend - 原生调试能力

⚙️ 高级配置选项

• --headless - 无头模式运行
• --isolated - 临时用户数据目录
• --channel - 指定Chrome版本通道
• --browserUrl - 连接现有Chrome实例
• --executablePath - 自定义Chrome路径

🔒 安全与隐私

• 沙箱环境支持
• 用户数据隔离选项
• 权限控制机制
• 敏感信息访问提醒

环境配置详解

完整的环境搭建指南，确保在不同平台上都能顺利运行 Chrome DevTools MCP。

🍎 macOS 环境配置

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 重新加载配置
source ~/.zshrc

# 安装 Node.js 22
nvm install 22
nvm use 22
nvm alias default 22

# 验证安装
node --version

🪟 Windows 环境配置

1. 下载 nvm-windows：

github.com/coreybutler/nvm-windows/releases

# 安装 Node.js 22
nvm install 22.20.0
nvm use 22.20.0

# 查看已安装版本
nvm list

🤖 AI 客户端快速配置

Claude Code

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Codex CLI

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Gemini CLI

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

🎯 高级配置示例

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

配置参数详解

深入理解每个配置参数的作用和适用场景，选择最适合您需求的配置方案。

🌟 --channel 参数

选择不同的 Chrome 版本通道：

• stable - 稳定版（默认，推荐生产使用）
• beta - 测试版（新功能预览）
• dev - 开发版（开发者功能）
• canary - 每日构建版（最新功能）

💡 需要测试最新 Chrome API 时选择 canary

👻 --headless 参数

控制浏览器界面显示：

• true - 无头模式，不显示界面
• false - 显示浏览器窗口

✅ 无头模式优势：更快启动、更少内存、适合 CI/CD

⚠️ 调试时建议设为 false 以观察浏览器行为

🔒 --isolated 参数

控制用户数据持久化：

• true - 临时目录，关闭后清理
• false - 持久化目录，保留数据

🗑️ isolated=true：每次都是全新环境，不保留登录状态

💾 isolated=false：保留 Cookie 和登录状态

🎯 场景化配置推荐

🔧 开发调试配置

适合：本地开发、功能调试、界面观察

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=stable",
        "--headless=false"
      ]
    }
  }
}

🤖 自动化测试配置

适合：CI/CD、批量测试、性能监控

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=stable",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

🍪 保持登录状态配置

适合：电商操作、社交媒体、企业系统

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--headless=true"
      ]
    }
  }
}

🔗 连接现有浏览器配置

适合：使用本地浏览器的所有登录状态

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://localhost:9222"
      ]
    }
  }
}

📋 配置选择指南

首次使用
去掉 --isolated，保留登录状态

生产环境
使用 --isolated，确保环境干净

开发调试
设置 --headless=false，观察界面

稳定性优先
使用 --channel=stable

💡 验证配置：配置完成后，向 AI 发送测试指令："Check the performance of https://developers.chrome.com"

最佳实践与注意事项

充分发挥 Chrome DevTools MCP 潜力的实用建议和安全提醒。

✅ 推荐做法

• 首次使用时先测试简单任务
• 为不同项目使用不同的配置
• 定期清理性能追踪文件
• 在 CI/CD 中使用 --headless 模式
• 保存重要的调试截图和日志

⚠️ 安全提醒

• AI 可访问浏览器中的所有数据
• 避免在调试时打开敏感页面
• 使用 --isolated 模式处理敏感任务
• 定期检查用户数据目录
• 不要在生产环境中使用个人账户

🚀 性能优化

• 使用最新版本的 Chrome 和 Node.js
• 合理设置网络和 CPU 模拟参数
• 避免同时运行多个浏览器实例
• 及时关闭不需要的页面标签
• 监控系统资源使用情况