DevTools Intermediate TypeScript

Chrome DevTools MCP - AI 编程浏览器工具

Google 官方 Chrome DevTools MCP 服务器，让 AI 编程助手控制 Chrome 浏览器，支持自动化、性能分析、网络监控和截图

GitHub: ChromeDevTools/chrome-devtools-mcp (35,161 stars) 2026年4月15日

devtoolschromemcp

什么是 Chrome DevTools MCP？

Chrome DevTools MCP 是 Google 官方发布的 Chrome DevTools Model Context Protocol (MCP) 服务器，让 AI 编程助手（如 Claude、Cursor、Copilot）可以控制和使用 Chrome 浏览器的完整功能。

安装

环境要求

Node.js v20.19+
Chrome current stable

MCP 客户端配置

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

Slim 模式（仅基础浏览）

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

核心功能

功能	说明
浏览器自动化	使用 Puppeteer 自动化操作 Chrome
性能分析	录制 traces，提取性能洞察
网络监控	分析网络请求、检查控制台消息
截图	对页面进行截图
调试	深入检查和修改浏览器数据

支持的 AI 平台

平台	安装方式
Claude Code	`claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`
Cursor / Copilot	MCP 客户端配置

隐私说明

⚠️ 注意：

会将浏览器内容暴露给 MCP 客户端
不要分享敏感个人信息
Google 会收集使用统计（可用 --no-usage-statistics 禁用）

与其他工具对比

特性	Chrome DevTools MCP	Puppeteer	Playwright
架构	MCP Server	直接 API	直接 API
AI 集成	原生 MCP 协议	需自行集成	需自行集成
复杂度	低	中	中

最佳实践

敏感信息勿分享：浏览器内容对 AI 可见
Slim 模式：仅做基础浏览时更快
headless 模式：CI 环境用 headless Chrome
禁用遥测：生产环境加 --no-usage-statistics

参考

GitHub: ChromeDevTools/chrome-devtools-mcp
npm: https://www.npmjs.com/package/chrome-devtools-mcp