一、为什么需要 Chrome MCP？

你有没有遇到过这样的场景：

• 让 AI 帮你查个资料，它只能给你一堆链接，还得你自己点开看
• 想让 AI 帮你测试一下刚写好的前端页面，它只能看代码，看不到实际效果
• 需要 AI 帮你在网页上填个表单、点个按钮，它完全无能为力

Claude Code 虽然强大，但它一直有个短板——无法直接操作浏览器。

直到 Chrome DevTools MCP 的出现，彻底改变了这个局面。

简单来说，MCP（Model Context Protocol） 是 Anthropic 推出的一个协议标准，让 AI 能够连接外部工具。而 Chrome DevTools MCP 就是基于这个协议，让 Claude Code 获得了"操控浏览器"的能力。

装上它之后，Claude Code 可以：

• 打开网页、点击按钮、填写表单
• 读取页面内容、分析 DOM 结构
• 执行 JavaScript 脚本
• 截图、录性能 trace
• 甚至帮你做 Lighthouse 审计

一句话总结：Claude Code 从此有了"眼睛"和"手"，能真正操作 Web 了。

今天这篇文章，我就从安装配置到实际使用，带大家完整体验一下 Chrome MCP 的强大之处。

二、Chrome DevTools MCP 简介

Chrome DevTools MCP 是 Google 官方提供的一个 MCP 服务器，它把 Chrome DevTools 的能力暴露给了 AI 模型。

我们先来看看它能做什么：

能力分类	具体功能	说明
页面导航	navigate_page、new_page、close_page	打开、关闭、跳转页面
页面交互	click、fill、fill_form、press_key	点击元素、填写表单、按键操作
内容获取	take_snapshot、evaluate_script	获取页面结构、执行 JS 脚本
截图录制	take_screenshot、take_heapsnapshot	页面截图、堆快照
网络监控	list_network_requests、get_network_request	查看网络请求
性能分析	performance_start_trace、lighthouse_audit	性能追踪、Lighthouse 审计
设备模拟	emulate、resize_page	模拟移动设备、调整视口

可以看到，基本上 Chrome DevTools 能做的事情，这个 MCP 都能做。

三、环境准备

3.1 前置条件

在开始之前，确保你已经具备以下环境：

• Node.js：v18 或更高版本
• Chrome 浏览器：最新版本
• Claude Code：已安装并配置好

3.2 安装 Chrome DevTools MCP

Chrome DevTools MCP 的安装非常简单，只需要一条命令：

npx @anthropic-ai/claude-code mcp add chrome-devtools -- npx @anthropic-ai/chrome-devtools-mcp@latest

安装完成后，Claude Code 会自动下载并配置 MCP 服务器。

3.3 理解 MCP 配置文件

安装命令执行后，会在项目根目录生成一个 .mcp.json 文件，这就是 MCP 的配置文件：

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

配置说明：

字段	说明
mcpServers	所有 MCP 服务器的配置容器
chrome-devtools	服务器名称，可以自定义
command	启动命令，这里用 npx
args	命令参数，-y 表示自动确认安装
env	环境变量，可以传入配置参数

你也可以手动编辑这个文件来添加或修改 MCP 服务器。比如，如果你想同时配置多个 MCP，可以这样写：

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

另外，在 .claude/settings.local.json 中会看到 enabledMcpjsonServers 字段，它控制哪些 MCP 服务器是启用状态：

{
  "enabledMcpjsonServers": [
    "chrome-devtools"
  ]
}

3.4 启动 Chrome（远程调试模式）

这一步很关键！ Chrome DevTools MCP 需要通过 Chrome 的远程调试协议来控制浏览器，所以我们需要以远程调试模式启动 Chrome。

Windows 用户：

# 先关闭所有 Chrome 窗口，然后执行
& "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

macOS 用户：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux 用户：

google-chrome --remote-debugging-port=9222

启动后，Chrome 会打开一个新窗口。不要关闭这个窗口，它就是 MCP 要控制的目标浏览器。

踩坑提醒：如果你之前有 Chrome 进程在后台运行，需要先全部关掉，否则远程调试端口可能无法正常绑定。Windows 用户可以在任务管理器中结束所有 Chrome 进程。

3.5 验证安装

启动 Claude Code，随便问一个问题，比如"帮我看看浏览器打开了什么页面"。如果 MCP 配置正确，Claude Code 会自动调用 Chrome DevTools MCP 来获取浏览器信息。

通过MCP启动的chrome会有个提示“正受到自动测试软件的控制”。

四、核心功能体验

接下来，我通过几个实际案例，带大家体验 Chrome MCP 的核心功能。

4.1 浏览器导航与页面快照

最基本的操作就是让 Claude Code 打开一个网页并读取内容。

示例：打开 Bing 首页

我在 Claude Code 中输入：

帮我打开 Bing 搜索首页

Claude Code 会调用 navigate_page 工具：

navigate_page(type="url", url="https://www.bing.com")

然后调用 take_snapshot 获取页面结构：

take_snapshot()

返回的页面快照会包含所有可交互元素的结构化信息，比如：

RootWebArea "搜索 - Microsoft 必应"
  ├── textbox "在此处输入你的搜索"
  ├── button "搜索"
  ├── link "Copilot"
  ├── link "图片"
  ├── link "视频"
  └── ...

关键概念：UID

每个页面元素都有一个唯一的 uid，比如 uid=4_9。后续的点击、填写操作都需要通过 uid 来定位元素。这就像是给页面上的每个元素编了个号，让 AI 能精确地找到它。

4.2 表单填写与搜索操作

有了 uid 定位，我们就可以让 Claude Code 在网页上填写表单了。

示例：在 Bing 上搜索关键词

我告诉 Claude Code：

帮我在 Bing 搜索"Claude Code MCP 教程" 最后整理搜索结果

Claude Code 会依次执行：

# 1. 在搜索框中填写关键词
fill(uid="4_9", value="Claude Code MCP 教程")

# 2. 点击搜索按钮
click(uid="4_10")

搜索完成后，Claude Code 还可以调用 evaluate_script 提取搜索结果：

// 提取搜索结果标题和链接
const results = [];
const items = document.querySelectorAll('li.b_algo h2 a');
items.forEach((a, i) => {
  if (i < 10) {
    results.push({ title: a.textContent, url: a.href });
  }
});
return results;

返回结果：

[
  {"title": "最适合新手的 Claude Code、MCP、Skills 全套教程", "url": "..."},
  {"title": "Claude Code MCP - 菜鸟教程", "url": "..."},
  {"title": "通过 MCP 将 Claude Code 连接到工具 - Claude 官方文档", "url": "..."},
  ...
]

这个能力的实际应用场景非常多：

• 自动化数据采集
• 表单自动填写
• 网页功能测试
• 竞品信息收集

4.3 JavaScript 脚本执行

evaluate_script 是一个非常强大的工具，它可以让 Claude Code 在页面上执行任意 JavaScript 代码。

示例：获取页面性能数据

() => {
  const perf = performance.getEntriesByType('navigation')[0];
  return {
    domContentLoaded: perf.domContentLoadedEventEnd - perf.startTime,
    loadComplete: perf.loadEventEnd - perf.startTime,
    domInteractive: perf.domInteractive - perf.startTime
  };
}

返回结果：

{
  "domContentLoaded": 1234,
  "loadComplete": 2345,
  "domInteractive": 1100
}

示例：提取页面所有链接

() => {
  const links = document.querySelectorAll('a');
  return Array.from(links).slice(0, 20).map(a => ({
    text: a.textContent.trim(),
    href: a.href
  }));
}

这个能力让 Claude Code 不仅能"看到"页面，还能"理解"页面。

4.4 截图与视觉分析

Claude Code 可以随时对页面进行截图，并结合视觉能力分析页面内容。

示例：截图当前页面

take_screenshot(filePath="screenshot.png")

截图会保存到指定路径，同时 Claude Code 会自动识别截图中的内容。

实际应用场景：

• UI 自动化测试：截图后让 AI 判断页面渲染是否正确
• Bug 复现：自动截图记录操作过程
• 设计走查：对比设计稿和实际页面

4.5 表单批量填写

如果你需要填写一个复杂的表单，Chrome MCP 提供了 fill_form 工具，可以一次性填写多个字段。

示例：批量填写表单

fill_form(elements=[
  {uid: "input-username", value: "testuser"},
  {uid: "input-email", value: "test@example.com"},
  {uid: "checkbox-agree", value: "true"}
])

比逐个字段填写效率高很多。

4.6 网络请求监控

Chrome MCP 还能监控页面的网络请求，这在调试 API 接口时非常有用。

示例：查看页面所有网络请求

list_network_requests()

返回结果包含每个请求的 URL、状态码、资源类型等信息。

示例：获取特定请求的详细信息

get_network_request(reqid=42)

可以看到请求头、响应体、耗时等详细信息。

4.7 设备模拟与响应式测试

想测试页面在手机上的显示效果？一行命令搞定。

示例：模拟 iPhone 视口

emulate(viewport="390x844x3,mobile,touch")

示例：模拟暗色模式

emulate(colorScheme="dark")

4.8 Lighthouse 审计

最后这个功能可能是最实用的——直接让 Claude Code 跑一个 Lighthouse 审计。

lighthouse_audit(mode="navigation", device="desktop")

返回结果会包含：

• Accessibility（无障碍）得分
• SEO 得分
• Best Practices 得分

Claude Code 会根据审计结果，自动给出优化建议。

五、实战案例

5.1 自动化搜索流程

讲了这么多单个功能，我们来看一个完整的实战案例。

需求：让 Claude Code 自动搜索并提取信息

整个流程如下：

用户："帮我搜索一下 2024 年最流行的 Python Web 框架"

Claude Code 执行步骤：
1. navigate_page → 打开 Bing
2. fill → 在搜索框输入关键词
3. click → 点击搜索按钮
4. take_snapshot → 获取搜索结果页面结构
5. evaluate_script → 提取搜索结果列表
6. 返回结果给用户

整个过程完全自动化，用户只需要说出需求，剩下的全交给 Claude Code。

5.2 自动化填写在线表格

接下来这个案例更加贴近实际办公场景——让 Claude Code 自动填写腾讯在线文档的表格。

需求：在腾讯文档的测试表格中批量填写学生信息

表格结构如下：

姓名	学号	班级
张三	2024001	计算机1班
李四	2024002	计算机2班
王五	2024003	软件工程1班
赵六	2024004	软件工程2班
孙七	2024005	数据科学1班

实现过程：

第一步：打开在线文档

new_page(url="https://docs.qq.com/sheet/DRWxCUHVFdFhreGVL?...")

Claude Code 会自动打开指定的腾讯文档链接。

第二步：使用剪贴板批量写入

对于在线表格，由于其使用 Canvas 渲染，传统的 fill 工具无法直接操作单元格。这时我们可以用一个巧妙的方法——通过剪贴板粘贴数据：

// 使用 evaluate_script 写入剪贴板
async () => {
  const data = "姓名\t学号\t班级\n张三\t2024001\t计算机1班\n李四\t2024002\t计算机2班\n王五\t2024003\t软件工程1班\n赵六\t2024004\t软件工程2班\n孙七\t2024005\t数据科学1班";
  await navigator.clipboard.writeText(data);
  return 'copied';
}

然后用快捷键粘贴：

press_key(key="Control+v")

第三步：验证结果

take_screenshot()

Claude Code 会截图确认数据已成功填入表格。

关键技巧：

1. 剪贴板是处理 Canvas 渲染表格的利器：腾讯文档、Google Sheets 等在线表格都使用 Canvas 渲染，无法直接操作 DOM 元素。通过剪贴板粘贴可以绕过这个限制。

2. Tab 分隔列，换行分隔行：在剪贴板数据中，用 \t（制表符）分隔同一行的不同列，用 \n（换行符）分隔不同行。

3. 先定位再粘贴：确保光标定位到正确的起始单元格（如 A1），再执行粘贴操作。

这个能力的实际应用场景：

• 批量录入数据到在线表格
• 自动填写在线表单
• 数据迁移：从 Excel 复制到在线文档
• 批量更新表格内容

六、注意事项与踩坑记录

6.1 手动打开的 Chrome 窗口能被控制吗？

这是很多人会问的问题。答案是：取决于 Chrome 的启动方式。

Chrome DevTools MCP 通过 Chrome DevTools Protocol（CDP）与浏览器通信，需要连接到 Chrome 的远程调试端口。关键点在于：

场景	能否被 MCP 控制
Chrome 以 --remote-debugging-port=9222 启动	✅ 可以
在上述 Chrome 中手动打开新窗口/标签页	✅ 可以
Chrome 正常启动（双击图标）	❌ 不可以
在正常 Chrome 中手动打开的窗口	❌ 不可以

简单理解：MCP 控制的是 Chrome 进程，不是单个窗口。

只要 Chrome 进程启动时带了 --remote-debugging-port 参数，那么在这个进程里打开的所有窗口（不管是 Claude Code 打开的还是你手动打开的）都可以被 MCP 控制。

实用技巧：如果你想在日常使用的 Chrome 中同时使用 MCP，可以在 Chrome 快捷方式的"目标"后面加上 --remote-debugging-port=9222，这样每次启动 Chrome 都会自动开启调试端口。

如何复用已有的 Chrome 会话？

很多时候我们已经在 Chrome 里做了一半的工作（比如填了一半的表单），这时想让 Claude Code 接手继续。问题是这个 Chrome 没有开调试端口，MCP 连不上。

解决方法分两步：

第一步：开启 Chrome 的会话恢复

打开 Chrome → 设置 → 启动时 → 选择"继续浏览上次打开的网页"。

第二步：重启 Chrome 并带上调试端口

# Windows：先关闭 Chrome，再执行
& "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

Chrome 重启后会自动恢复之前的标签页和表单状态（前提是页面支持自动保存），MCP 就能接管了。

注意：部分网页的表单数据在刷新后会丢失。如果是很重要的填写进度，建议先手动保存草稿再重启。

6.2 百度搜索会触发验证码

在测试过程中，我发现百度搜索会触发滑块验证码，导致自动化流程中断。建议使用 Bing 或 Google 进行自动化搜索，它们对自动化访问更友好。

6.3 远程调试端口冲突

如果 9222 端口被占用，Chrome 可能无法正常启动远程调试模式。解决方法：

# 查看端口占用
netstat -ano | findstr 9222

# 杀掉占用进程
taskkill /PID <进程ID> /F

6.4 页面加载超时

某些网页加载较慢时，可能会出现导航超时。可以通过设置 timeout 参数来延长等待时间：

navigate_page(type="url", url="https://example.com", timeout=30000)

6.5 元素定位失败

如果页面结构发生变化，之前获取的 uid 可能失效。解决方法：重新调用 take_snapshot 获取最新的页面结构。

七、总结

Chrome DevTools MCP 的出现，让 Claude Code 从一个"只能看代码"的编程助手，变成了一个"能操作浏览器"的全能助手。

核心优势：

1. 零代码自动化：不需要写 Selenium/Playwright 脚本，自然语言就能驱动浏览器
2. 全能力覆盖：导航、交互、截图、性能分析、网络监控，一站式搞定
3. 实时反馈：AI 能看到操作结果，及时调整策略
4. 降低门槛：不会写前端自动化测试的人，也能用它做 Web 测试

适用场景：

• 前端开发：快速测试页面功能、响应式布局
• 数据采集：自动化抓取网页信息
• QA 测试：自动化回归测试
• 日常效率：自动填写表单、批量操作

个人体验：

用了几天 Chrome MCP 之后，我最大的感受是——这才是 AI 应该有的样子。以前让 AI 帮忙，它只能在文本层面和我交互；现在它能真正"看到"和"操作"网页了，效率提升非常明显。

如果你也是 Claude Code 用户，强烈建议试试这个 MCP。安装过程不复杂，但带来的能力提升是质变级别的。