Chrome DevTools MCP 架构分析

本文档详细记录了在 VS Code 中使用 GitHub Copilot 插件 时,Chrome DevTools MCP (Model Context Protocol) 服务器在 VS Code + WSL 环境下的完整架构、运行机制和数据存储位置。

重要说明: 本调研基于通过 VS Code 的 GitHub Copilot 扩展使用 chrome-devtools-mcp 的场景。如果直接从命令行或其他方式启动 MCP 服务器,架构可能有所不同。

调研日期: 2025-10-18 环境: Windows 11 + WSL2 (Ubuntu 24.04.3) + VS Code Remote WSL + GitHub Copilot Extension MCP 版本: chrome-devtools-mcp@0.8.1 Chrome 版本: 141.0.0.0

架构概览

系统架构图

┌─────────────────────────────────────────────────────────────┐
│                      Windows 系统                            │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌────────────────────────────────────────┐                │
│  │  VS Code (Windows 客户端)              │                │
│  │  └── Remote WSL Extension              │                │
│  └──────────────┬─────────────────────────┘                │
│                 │ 连接                                       │
│  ┌──────────────▼─────────────────────────┐                │
│  │  WSL2 (Ubuntu 24.04.3)                 │                │
│  │  ├── VS Code Server                    │                │
│  │  │   ├── GitHub Copilot Extension      │                │
│  │  │   │   └── MCP Framework             │                │
│  │  │   │       └── 读取配置              │                │
│  │  │   │           └── mcp.json           │                │
│  └──────────────┬─────────────────────────┘                │
│                 │                                            │
│                 │ 调用 Windows 侧的 npx                     │
│                 │                                            │
│  ┌──────────────▼─────────────────────────┐                │
│  │  Node.js 进程链                        │                │
│  │  ┌──────────────────────────────────┐ │                │
│  │  │ PID: 20484                        │ │                │
│  │  │ npx chrome-devtools-mcp@latest    │ │                │
│  │  │ └─────┬─────────────────────────┐ │ │                │
│  │  │       │                         │ │ │                │
│  │  │       ▼                         │ │ │                │
│  │  │ PID: 24832                      │ │ │                │
│  │  │ chrome-devtools-mcp/index.js    │ │ │                │
│  │  │ (Puppeteer 控制层)              │ │ │                │
│  │  └──────┬──────────────────────────┘ │ │                │
│  └─────────┼────────────────────────────┘ │                │
│            │                               │                │
│            │ 启动并控制                    │                │
│            │                               │                │
│  ┌─────────▼──────────────────────────┐  │                │
│  │  Google Chrome 进程树              │  │                │
│  │  ┌──────────────────────────────┐ │  │                │
│  │  │ PID: 12284 (主进程)          │ │  │                │
│  │  │ chrome.exe                    │ │  │                │
│  │  │ ├── PID: 8008  (GPU进程)     │ │  │                │
│  │  │ ├── PID: 13360 (渲染进程)    │ │  │                │
│  │  │ ├── PID: 16264 (渲染进程)    │ │  │                │
│  │  │ ├── PID: 18116 (网络服务)    │ │  │                │
│  │  │ ├── PID: 19404 (扩展进程)    │ │  │                │
│  │  │ └── PID: 21012 (实用工具)    │ │  │                │
│  │  └──────────────────────────────┘ │  │                │
│  └────────────────────────────────────┘  │                │
│                                           │                │
│  数据存储:                                │                │
│  C:\Users\<username>\.cache\chrome-devtools-mcp\ │        │
└───────────────────────────────────────────┘                │

详细分析

1. MCP 配置文件

位置: C:\Users\<username>\AppData\Roaming\Code\User\mcp.json

{
  "servers": {
    "chromedevtools/chrome-devtools-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"],
      "gallery": "https://api.mcp.github.com/v0/servers/...",
      "version": "0.0.1-seed"
    }
  }
}

关键发现:

• 配置文件存储在 Windows 用户目录
• type: "stdio" 表示使用标准输入输出进行通信
• command: "npx" 会在 Windows 环境中执行

2. 进程启动机制

Node.js 进程链

主 npx 进程 (PID: 20484)

命令: "C:\Program Files\nodejs\node.exe"
      "C:\Users\<username>\AppData\Roaming\npm\node_modules\npm\bin\npx-cli.js"
      chrome-devtools-mcp@latest

MCP 服务器进程 (PID: 24832)

命令: "node"
      "C:\Users\<username>\AppData\Local\npm-cache\_npx\<hash>\
       node_modules\.bin\..\chrome-devtools-mcp\build\src\index.js"

启动流程

1. 配置读取: VS Code 的 GitHub Copilot 读取 mcp.json
2. 跨平台调用: 虽然 VS Code Server 运行在 WSL,但通过 Windows 互操作调用 Windows 侧的 npx
3. MCP 启动: npx 下载/运行 chrome-devtools-mcp 包
4. Chrome 启动: MCP 服务器使用 Puppeteer 库启动 Chrome

3. Chrome 浏览器配置

启动参数 (完整)

"C:\Program Files\Google\Chrome\Application\chrome.exe"
  # 自动化相关
  --enable-automation                    # 启用自动化模式
  --remote-debugging-pipe                # 使用管道进行远程调试

  # 禁用功能
  --disable-background-networking        # 禁用后台网络
  --disable-background-timer-throttling  # 禁用后台计时器节流
  --disable-backgrounding-occluded-windows
  --disable-breakpad                     # 禁用崩溃报告
  --disable-client-side-phishing-detection
  --disable-component-extensions-with-background-pages
  --disable-crash-reporter
  --disable-default-apps
  --disable-dev-shm-usage                # 禁用 /dev/shm 使用
  --disable-hang-monitor
  --disable-infobars                     # 禁用信息栏
  --disable-ipc-flooding-protection
  --disable-popup-blocking               # 禁用弹窗阻止
  --disable-prompt-on-repost
  --disable-renderer-backgrounding
  --disable-search-engine-choice-screen
  --disable-sync                         # 禁用同步
  --disable-extensions                   # 禁用扩展

  # 启用功能
  --allow-pre-commit-input
  --export-tagged-pdf
  --force-color-profile=srgb             # 强制使用 sRGB 色彩配置
  --generate-pdf-document-outline
  --metrics-recording-only
  --no-first-run                         # 跳过首次运行向导
  --password-store=basic
  --use-mock-keychain

  # 功能标志
  --disable-features=Translate,AcceptCHFrame,MediaRouter,
                     OptimizationHints,RenderDocument,
                     ProcessPerSiteUpToMainFrameThreshold,
                     IsolateSandboxedIframes
  --enable-features=PdfOopif

  # 数据目录
  --user-data-dir=C:\Users\<username>\.cache\chrome-devtools-mcp\chrome-profile

  # 初始页面
  about:blank

  # 其他
  --hide-crash-restore-bubble

关键参数解析

参数	作用	影响
--enable-automation	启用自动化模式	浏览器显示”Chrome 正在受自动化测试软件控制”
--remote-debugging-pipe	使用管道通信	通过标准输入输出与 Puppeteer 通信
--user-data-dir	指定用户数据目录	数据持久化到指定位置
--disable-extensions	禁用所有扩展	避免扩展干扰自动化
没有 --headless	不是无头模式	浏览器有可见窗口

4. 数据存储结构

主数据目录

C:\Users\<username>\.cache\chrome-devtools-mcp\chrome-profile\
├── Default/                              # 默认用户配置文件
│   ├── Preferences                       # 用户偏好设置
│   ├── History                           # 浏览历史
│   ├── Cookies                           # Cookie 数据
│   ├── Local Storage/                    # 本地存储
│   ├── Session Storage/                  # 会话存储
│   ├── IndexedDB/                        # IndexedDB 数据库
│   └── Cache/                            # 缓存文件
│
├── CertificateRevocation/                # 证书吊销数据
├── Crashpad/                             # 崩溃报告系统
├── component_crx_cache/                  # 组件缓存
├── extensions_crx_cache/                 # 扩展缓存
├── GraphiteDawnCache/                    # 图形缓存
├── GrShaderCache/                        # 着色器缓存
├── ShaderCache/                          # 着色器缓存(备用)
├── Safe Browsing/                        # 安全浏览数据
├── OnDeviceHeadSuggestModel/             # 本地搜索建议模型
├── MEIPreload/                           # 媒体扩展预加载
├── hyphen-data/                          # 连字符数据
├── FirstPartySetsPreloaded/              # 第一方集合数据
├── FileTypePolicies                      # 文件类型策略
├── AutofillStates                        # 自动填充状态
└── Local State                           # 全局状态文件

临时文件

C:\Users\<username>\AppData\Local\Temp\   # Windows 临时目录
└── (Chrome 运行时临时文件)

日志文件 (WSL 侧)

~/.claude-chrome-devtools.log              # MCP 服务日志

日志示例:

2025-10-18T08:15:33.561Z mcp:log Starting Chrome DevTools MCP Server v0.8.1
2025-10-18T08:15:33.566Z mcp:log Chrome DevTools MCP Server connected

5. 浏览器运行时信息

通过 JavaScript 获取的运行时信息

{
  // 浏览器标识
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36",
  "platform": "Win32",
  "vendor": "Google Inc.",

  // 视口信息
  "viewport": {
    "innerWidth": 1251,
    "innerHeight": 1226,
    "outerWidth": 1266,
    "outerHeight": 1373,
    "devicePixelRatio": 1.5
  },

  // 屏幕信息
  "screen": {
    "width": 2560,
    "height": 1440,
    "availWidth": 2560,
    "availHeight": 1392,
    "colorDepth": 24
  },

  // 自动化检测
  "automation": {
    "webdriver": true,           // ✅ 表明处于自动化模式
    "chromeRuntime": false,
    "permissions": true
  },

  // 系统资源
  "hardwareConcurrency": 8,      // 8 个逻辑 CPU 核心
  "deviceMemory": 8,             // 8 GB 内存
  "maxTouchPoints": 0,           // 非触摸设备

  // 本地化
  "language": "en-US",
  "timeZone": "Asia/Shanghai"
}

关键技术细节

为什么不是无头模式?

通过检查 Chrome 进程的启动参数发现:

1. 默认配置(仅指定 chrome-devtools-mcp@latest)不包含 --headless 参数
2. 因此 Chrome 以有界面的自动化模式运行
3. 如需无头模式,需要在 mcp.json 中显式配置 --headless 参数

跨平台通信机制

虽然 VS Code Server 运行在 WSL,但 Chrome 运行在 Windows:

WSL (VS Code Server)
  ↓ 通过 Windows 互操作
Windows (npx)
  ↓ 启动
Windows (chrome-devtools-mcp)
  ↓ 通过 Puppeteer
Windows (Chrome)

关键技术:

• Windows-WSL 互操作: WSL 可以直接调用 Windows 可执行文件
• stdio 通信: MCP 使用标准输入输出进行跨进程通信
• Pipe 调试: Chrome 通过 --remote-debugging-pipe 接受控制命令

为什么能在任务管理器中看到?

因为所有关键进程都运行在 Windows 上:

• ✅ Node.js (npx) - Windows 进程
• ✅ chrome-devtools-mcp - Windows 进程
• ✅ Chrome - Windows 进程
• ❌ VS Code Server - WSL 进程(仅作为发起者)

配置建议

无头模式配置

如果需要真正的无头模式,修改 mcp.json:

{
  "chromedevtools/chrome-devtools-mcp": {
    "type": "stdio",
    "command": "npx",
    "args": ["chrome-devtools-mcp@latest", "--headless", "true"]
  }
}

自定义 Chrome 路径

{
  "args": [
    "chrome-devtools-mcp@latest",
    "--executablePath",
    "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
  ]
}

注意: Windows 路径需要转义反斜杠

使用临时用户目录

{
  "args": ["chrome-devtools-mcp@latest", "--isolated", "true"]
}

这会为每次会话创建临时目录,退出时自动清理。

自定义视口大小

{
  "args": ["chrome-devtools-mcp@latest", "--viewport", "1920x1080"]
}

性能优化配置

{
  "args": [
    "chrome-devtools-mcp@latest",
    "--headless",
    "true",
    "--isolated",
    "true",
    "--viewport",
    "1920x1080",
    "--chromeArg=--disable-gpu",
    "--chromeArg=--no-sandbox"
  ]
}

调试技巧

查看 MCP 日志

WSL 侧:

tail -f ~/.claude-chrome-devtools.log

查看 Chrome 进程

Windows PowerShell:

Get-Process chrome | Select-Object Id, ProcessName, Path, StartTime

获取命令行参数

Get-CimInstance Win32_Process -Filter "name='chrome.exe'" |
  Select-Object ProcessId, CommandLine |
  Format-List

查看数据目录大小

Get-ChildItem "$env:USERPROFILE\.cache\chrome-devtools-mcp\chrome-profile" -Recurse |
  Measure-Object -Property Length -Sum |
  Select-Object @{Name="Size(MB)";Expression={[math]::Round($_.Sum/1MB, 2)}}

清理缓存

# 停止所有 Chrome 进程
Stop-Process -Name chrome -Force

# 删除缓存
Remove-Item "$env:USERPROFILE\.cache\chrome-devtools-mcp\chrome-profile" -Recurse -Force

常见问题

Q1: 为什么看不到 Chrome 窗口?

A: 检查是否使用了 --headless 参数。默认配置(仅 chrome-devtools-mcp@latest)应该有窗口。

Q2: Chrome 窗口一闪而过

A: 这是正常的。MCP 服务会在没有活动连接时关闭 Chrome。保持 VS Code Copilot 活跃即可。

Q3: 数据会被持久化吗?

A:

• 默认: 是的,存储在 C:\Users\<username>\.cache\chrome-devtools-mcp\chrome-profile\
• 使用 --isolated: 不会,使用临时目录并在退出时清理

Q4: 如何连接到已运行的 Chrome?

A: 使用 --browserUrl 参数:

{
  "args": ["chrome-devtools-mcp@latest", "--browserUrl", "http://127.0.0.1:9222"]
}

先手动启动 Chrome:

chrome.exe --remote-debugging-port=9222

Q5: WSL 中的 Chrome 会被使用吗?

A: 不会。即使 WSL 中安装了 Chrome(如 /usr/bin/google-chrome),MCP 仍然会启动 Windows 侧的 Chrome,因为 npx 命令本身在 Windows 上执行。

性能考虑

内存占用

典型的 Chrome DevTools MCP 会占用:

• Chrome 进程: ~200-500 MB
• Node.js (MCP 服务器): ~50-100 MB
• 数据目录: ~10-50 MB(取决于使用情况)

CPU 使用

• 空闲: <1%
• 页面加载: 10-30%
• JavaScript 执行: 20-50%

网络流量

• 初始启动: ~5-10 MB(下载组件)
• 正常使用: 取决于访问的网站

安全注意事项

1. 自动化标识

Chrome 会显示”正在受自动化测试软件控制”的信息栏,这可能影响:

• 某些网站的反爬虫机制
• navigator.webdriver 属性为 true

2. 扩展和插件

默认配置禁用了所有扩展(--disable-extensions),包括:

• 广告拦截器
• 密码管理器
• 其他浏览器扩展

3. 数据隐私

数据存储在本地,但包括:

• 浏览历史
• Cookie
• 本地存储数据

建议:

• 使用 --isolated 模式进行敏感操作
• 定期清理缓存目录
• 不要在自动化浏览器中登录个人账户

4. 沙箱禁用

某些配置可能包含 --no-sandbox,这会:

• 降低安全性
• 允许更广泛的系统访问
• 仅在必要时使用(如 Docker 容器中)

相关资源

官方文档

• Chrome DevTools Protocol
• Puppeteer Documentation
• Model Context Protocol

项目仓库

• chrome-devtools-mcp
• Model Context Protocol SDK

Chrome 命令行参数

• List of Chromium Command Line Switches

总结

通过 VS Code GitHub Copilot 扩展使用 Chrome DevTools MCP 的架构特点:

1. 跨平台: VS Code Server 在 WSL 读取配置,通过 Windows 互操作启动 Windows 侧的服务
2. Windows 执行: Node.js、MCP 服务器和 Chrome 浏览器全部运行在 Windows 上
3. 有界面: 默认不是无头模式,可以在 Windows 任务管理器中看到和管理 Chrome 窗口
4. 持久化: 数据默认保存在 Windows 用户缓存目录(%USERPROFILE%\.cache\chrome-devtools-mcp\)
5. 自动化: 使用 Puppeteer 控制,支持完整的 Chrome DevTools Protocol
6. 灵活配置: 通过 mcp.json 中的参数可以调整运行模式、视口大小、数据目录等

这种设计既保留了 Chrome 的完整功能,又提供了编程控制能力,非常适合开发和测试场景。

---

文档版本: 1.0 最后更新: 2025-10-18 适用场景: VS Code + GitHub Copilot Extension + chrome-devtools-mcp