Chrome DevTools MCP 插件安装指南

插件用途

chrome-devtools-mcp 是 Chrome 官方团队提供的 MCP（Model Context Protocol）插件。它相当于给 Claude Code 装了一个"浏览器"，让 AI 可以直接操控 Chrome。

为什么需要它？

默认情况下，Claude 只能读代码、跑命令，看不到网页也无法操作网页。安装这个插件后，Claude 能够：

• 打开网页并"看到"页面内容（文本快照）
• 点击按钮、填写表单、滚动页面
• 对网页截图
• 查看网络请求和控制台日志
• 录制性能分析（Core Web Vitals）
• 运行 Lighthouse 审计（SEO、可访问性）

典型使用场景

连接模式

插件有两种核心工作方式：

模式一：自动启动新浏览器（默认）

不需要预先打开 Chrome。 插件自动启动一个新的 Chrome 实例，使用独立的用户数据目录。

• ✅ 简单，开箱即用
• ✅ 不影响你日常使用的 Chrome
• ✅ 登录状态、Cookie 等会持久化保留
• ❌ 与日常 Chrome 的登录状态不共享

模式二：连接已有 Chrome

复用你已经打开的 Chrome。 需要先以远程调试模式启动 Chrome。

• ✅ 共享你日常 Chrome 的登录状态、Cookie、扩展
• ✅ 不需要重新登录各种网站
• ❌ 需要手动启动 Chrome 远程调试端口

在 Windows 上启动带调试端口的 Chrome：

1"C:\Users\<用户名>\AppData\Local\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile"
2

注意：必须指定 --user-data-dir 为非默认目录，否则 Chrome 出于安全策略会拒绝启动远程调试。

可选配置

以下是常用 CLI 参数，可根据需要配置：

基础启动参数

连接已有浏览器

功能开关

配置示例

默认模式（启动新 Chrome，有界面，持久化状态）：无需任何配置，插件已默认此行为。

无头 + 隔离模式（CI/CD）：

1{
2  "mcpServers": {
3    "chrome-devtools": {
4      "command": "npx",
5      "args": ["chrome-devtools-mcp@latest", "--headless=true", "--isolated=true"]
6    }
7  }
8}
9

连接已有 Chrome：

1{
2  "mcpServers": {
3    "chrome-devtools": {
4      "command": "npx",
5      "args": ["chrome-devtools-mcp@latest", "--browserUrl=http://127.0.0.1:9222"]
6    }
7  }
8}
9

安装

Claude Code 内置了插件市场，通过 /plugin 命令即可安装，无需手动 clone 仓库或编写 MCP 配置。

在 Claude Code 中输入：

1/plugin
2

在弹出的插件列表中搜索 chrome-devtools-mcp，点击 Install。

或者用命令行：

1claude plugins install chrome-devtools-mcp@claude-plugins-official
2

安装完成后重启 Claude Code 即可生效。

自定义参数配置

/plugin 安装使用默认参数，适合大多数场景。如果需要自定义参数（如无头模式、连接已有 Chrome 等），需要在设置文件中手动添加 mcpServers 配置。

配置文件位置

Claude Code 有两个级别的设置文件：

优先级：项目级 > 用户本地 > 用户级。推荐将 mcpServers 配置写在用户级 ~/.claude/settings.json 中，一次配置到处可用。

配置示例

无头 + 隔离模式（CI/CD）：

在 ~/.claude/settings.json 中添加：

1{
2  "mcpServers": {
3    "chrome-devtools": {
4      "command": "npx",
5      "args": ["chrome-devtools-mcp@latest", "--headless=true", "--isolated=true"]
6    }
7  }
8}
9

连接已有 Chrome（共享 Cookie 和登录状态）：

1{
2  "mcpServers": {
3    "chrome-devtools": {
4      "command": "npx",
5      "args": ["chrome-devtools-mcp@latest", "--browserUrl=http://127.0.0.1:9222"]
6    }
7  }
8}
9

自定义 Chrome 路径：

1{
2  "mcpServers": {
3    "chrome-devtools": {
4      "command": "npx",
5      "args": ["chrome-devtools-mcp@latest", "--executablePath=C:\\你的Chrome路径\\chrome.exe"]
6    }
7  }
8}
9

与 /plugin 安装的关系

如果之前启用了 /plugin 中的 chrome-devtools-mcp，同时又在 settings.json 中手动配置了同名的 mcpServers，两者会冲突。建议只保留一种方式。

让 Claude 帮你配置

如果你不确定该怎么写配置，或者不想手动编辑 JSON，可以直接对 Claude 说：

"帮我配置 chrome-devtools-mcp 使用已有 Chrome（已开启 9222 端口）"

"帮我配置 chrome-devtools-mcp 为无头模式"

"帮我配置 chrome-devtools-mcp，使用指定的 Chrome 路径"

Claude 会自动读取当前设置文件，合并配置，避免冲突。

验证安装

在 Claude Code 中输入 /plugin，确认 chrome-devtools-mcp 显示为绿色 ✓ 已启用状态。

安装后首次调用任意浏览器工具时，插件会自动启动 Chrome。

可用工具

卸载

1claude plugins uninstall chrome-devtools-mcp@claude-plugins-official
2