Chrome DevTools MCP的使用

一、Chrome DevTools 是什么

Chrome DevTools 是 Chrome 浏览器自带的一套网页调试工具，开发者可以用来检查和调试网页。

1.1 如何打开

方式	操作
快捷键	F12 或 Ctrl+Shift+I（Mac: Cmd+Option+I）
右键菜单	网页空白处右键 → “检查”
菜单栏	Chrome → 更多工具 → 开发者工具

1.2 核心面板详解

Elements 面板（最常用）

查看和修改页面的 HTML 结构和 CSS 样式。

常用操作：
├── 点击左上角箭头图标 → 选择页面元素
├── 双击 HTML 标签 → 直接编辑内容
├── 右键元素 → 可以复制选择器、删除元素、添加属性
└── 右侧面板 → 查看和修改 CSS 样式

实用技巧：

/* 在 Styles 面板中可以直接添加 CSS */
element.style {
  background-color: red;  /* 实时预览效果 */
}

Console 面板

执行 JavaScript 代码、查看日志和报错信息。

// 常用命令
document.title                              // 获取页面标题
document.querySelectorAll('a').length       // 获取链接数量
document.querySelector('#login-btn').click()  // 模拟点击

// 查看存储
localStorage.getItem('token')              // 获取本地存储
sessionStorage.getItem('user')             // 获取会话存储
document.cookie                            // 获取 Cookie

// 网络请求（需要先在 Network 面板开启）
fetch('/api/v1/user').then(r => r.json()).then(console.log)

// 性能测量
console.time('操作')
// ... 执行代码 ...
console.timeEnd('操作')                    // 输出执行时间

过滤日志：

• errors：只显示错误

• warnings：只显示警告

• info：只显示信息

• 自定义过滤：输入关键词筛选

Network 面板（测试重点）

监控所有网络请求，查看请求和响应详情。

面板结构：
├── 工具栏
│   ├── 红色圆点：录制状态（点击可停止/开始）
│   ├── 🚫：清空请求列表
│   ├── Filter：按名称/类型过滤
│   └── Preserve log：保留跨页面请求
├── 请求列表
│   ├── Name：请求路径
│   ├── Status：状态码（200/301/404/500）
│   ├── Type：资源类型（xhr/fetch/document/css/js）
│   ├── Size：响应大小
│   └── Time：耗时
└── 请求详情（点击某个请求）
    ├── Headers：请求头/响应头
    ├── Payload：请求参数
    ├── Preview：响应预览
    ├── Response：响应原始数据
    └── Timing：各阶段耗时

测试场景：

1. 检查 API 是否正确调用
   - 筛选 XHR/Fetch 类型
   - 查看请求 URL、方法、参数

2. 检查响应是否正确
   - 查看 Status Code
   - 查看 Response 数据格式

3. 检查请求耗时
   - 查看 Timing 面板
   - 识别慢请求

Application 面板

查看浏览器存储的数据。

存储类型：
├── Local Storage：本地存储（关闭浏览器不清除）
├── Session Storage：会话存储（关闭标签页清除）
├── Cookies：Cookie 信息
├── IndexedDB：IndexedDB 数据库
└── Cache Storage：缓存存储

测试登录状态：

// 检查 Token 是否存在
localStorage.getItem('access_token')

// 检查 Cookie
document.cookie

// 清除所有存储（测试登出功能）
localStorage.clear()
sessionStorage.clear()

Sources 面板

查看源码、设置断点调试 JavaScript。

调试功能：
├── 文件树：查看加载的所有资源
├── 代码编辑器：直接修改源码（临时生效）
├── 断点：
│   ├── 行断点：点击行号
│   ├── 条件断点：右键行号 → 添加条件
│   └── DOM 断点：右键元素 → Break on
└── 调试控制
    ├── ▶️ 继续执行（F8）
    ├── ➡️ 单步跳过（F10）
    ├── ⬇️ 单步进入（F11）
    └── ⬆️ 单步跳出（Shift+F11）

Performance 面板

录制和分析页面性能。

使用步骤：
1. 点击录制按钮（红色圆点）
2. 操作页面（点击、滚动等）
3. 停止录制
4. 分析结果：
   ├── FPS：帧率（目标 > 60）
   ├── CPU：CPU 使用率
   ├── Memory：内存变化
   └── 火焰图：各函数执行时间

---

二、MCP 是什么

MCP（Model Context Protocol）是一种开放协议，用于标准化 AI 模型与外部工具/数据源 之间的通信方式。

2.1 为什么需要 MCP

问题	解决方案
AI 只能生成文本，不能操作外部工具	MCP 让 AI 能调用工具执行实际操作
不同 AI 平台的工具调用方式不统一	MCP 提供标准化的接口协议
开发者需要为每个 AI 平台单独适配工具	一次开发，多平台可用

类比：

• AI 是大脑，只能思考

• 工具是手脚，能执行操作

• MCP 是神经系统，连接大脑和手脚

2.2 核心概念

概念	说明	类比
MCP Host	需要调用工具的 AI 应用（如 Claude Desktop）	发出指令的人
MCP Client	与 Server 建立连接的客户端	传话的人
MCP Server	提供具体工具能力的服务	干活的人
Tools	Server 提供的具体能力	工具本身

2.3 工作流程

用户提问："帮我检查一下 http://localhost:8080 页面是否正常"
  ↓
MCP Host（Claude Desktop）理解意图
  ↓
MCP Client 发送工具调用请求
  ↓
MCP Server（chrome-devtools）执行操作
  ├── 启动浏览器
  ├── 打开页面
  ├── 截图
  └── 检查页面元素
  ↓
结果返回给 AI
  ↓
AI 生成最终回答："页面已正常加载，评价列表显示 10 条数据"

2.4 MCP vs 其他插件体系

MCP 经常和浏览器插件、AI Skill、ChatGPT Plugin 等概念混淆，这里做详细对比：

概念对比表

维度	浏览器插件	AI Skill	ChatGPT Plugin	MCP
全称	Chrome Extension	Claude Code Skill	ChatGPT Plugin	Model Context Protocol
开发者	前端开发者	AI 平台开发者	OpenAI	任何开发者
运行位置	浏览器内	AI 客户端内	OpenAI 服务器	本地/远程服务器
是否开源	部分开源	部分开源	否	完全开源
与 AI 的关系	无直接关系	AI 内置能力	AI 可调用的 API	AI 与工具的标准协议
通信协议	浏览器 API	内部接口	HTTPS + JSON	JSON-RPC

详细区别说明

1. MCP vs 浏览器插件

浏览器插件：
├── 运行在浏览器进程中
├── 通过 Chrome API 操作浏览器
├── 只能被浏览器使用
└── 与 AI 无关

MCP Server：
├── 独立进程运行
├── 通过标准协议与 AI 通信
├── 可以被任何支持 MCP 的 AI 使用
└── 专为 AI 设计

举例：

• 浏览器插件"广告拦截"：直接在浏览器中拦截广告，AI 不知道它的存在

• MCP Server"chrome-devtools"：AI 可以调用它来控制浏览器，执行自动化测试

2. MCP vs AI Skill

AI Skill（如 Claude Code 的 Skill）：
├── 是 AI 的"技能包"
├── 写的是提示词（Prompt）+ 工具调用规则
├── 运行在 AI 客户端内部
├── 依赖特定 AI 平台
└── 示例：/commit（自动提交代码）

MCP Server：
├── 是独立的服务
├── 写的是实际的代码（Node.js/Python）
├── 独立进程运行
├── 跨平台通用
└── 示例：chrome-devtools、filesystem

举例：

• Skill /commit：是一组提示词，告诉 AI 如何生成 commit message

• MCP Server filesystem：是一个 Node.js 程序，可以实际读写文件

3. MCP vs ChatGPT Plugin

ChatGPT Plugin：
├── 由 OpenAI 定义规范
├── 运行在 OpenAI 服务器上
├── 需要在 OpenAI 平台注册
├── 只能在 ChatGPT 中使用
├── 通过 HTTPS 调用 API
└── 需要部署到公网服务器

MCP Server：
├── 由 Anthropic 定义规范（开源）
├── 运行在本地或远程
├── 不需要注册，本地安装即可
├── 可被任何支持 MCP 的 AI 使用
├── 通过 JSON-RPC 通信
└── 可以在本地运行

4. MCP vs 直接 API 调用

直接 API 调用：
├── 开发者写代码调用外部 API
├── 需要处理认证、错误、重试
├── 只能在自己的代码中使用
├── AI 不知道这些 API 的存在
└── 需要为每个 AI 平台单独适配

MCP Server：
├── 将 API 封装成 AI 可调用的工具
├── 协议层处理认证、错误
├── 可以被任何 MCP 客户端使用
├── AI 自动发现和调用工具
└── 一次开发，多平台可用

总结：什么时候用什么

需求	推荐方案
给浏览器增加功能（如广告拦截）	浏览器插件
给 AI 增加一套操作规则（如代码提交流程）	AI Skill
给 ChatGPT 增加外部 API 能力	ChatGPT Plugin
让 AI 能操作本地工具/文件/浏览器	MCP Server
自己写代码调用外部服务	直接 API 调用

MCP 的独特优势

1. 开放性
   ├── 协议开源，任何人都可以开发 MCP Server
   └── 不依赖特定 AI 平台

2. 标准化
   ├── 统一的工具描述格式
   └── 统一的通信协议

3. 本地化
   ├── 可以在本地运行，数据不出本机
   └── 适合处理敏感数据

4. 组合性
   ├── 可以同时使用多个 MCP Server
   └── 像搭积木一样组合能力

2.5 MCP Server 的两种运行方式

方式	说明	使用场景
stdio	通过标准输入输出通信	本地工具、CLI 集成
SSE	通过 HTTP Server-Sent Events	远程服务、多用户共享

2.5 配置文件详解

配置文件位置：

• macOS：~/Library/Application Support/Claude/claude_desktop_config.json

• Windows：%APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "server-name": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-xxx"],
      "env": {
        "KEY": "value"
      }
    }
  }
}

字段	说明
command	启动命令（如 npx、node、python）
args	命令参数
env	环境变量
cwd	工作目录
url	SSE 模式的远程地址

2.6 常见 MCP Server

Server	功能	安装
@anthropic-ai/mcp-server-filesystem	读写本地文件	npm i -g @anthropic-ai/mcp-server-filesystem
@anthropic-ai/mcp-server-puppeteer	浏览器自动化	npm i -g @anthropic-ai/mcp-server-puppeteer
@anthropic-ai/mcp-server-sqlite	操作 SQLite	npm i -g @anthropic-ai/mcp-server-sqlite
@anthropic-ai/mcp-server-github	GitHub 操作	npm i -g @anthropic-ai/mcp-server-github
@anthropic-ai/mcp-server-sqlite	数据库操作	npm i -g @anthropic-ai/mcp-server-sqlite

2.7 调试 MCP

检查 MCP Server 是否正常工作：

# 查看 Claude Desktop 日志
# macOS
tail -f ~/Library/Logs/Claude/mcp*.log

# Windows
Get-Content "$env:APPDATA\Claude\logs\mcp*.log" -Tail 50 -Wait

# 手动测试 Server
echo '{"jsonrpc":"2.0","method":"initialize","params":{}}' | npx -y @anthropic-ai/mcp-server-puppeteer

---

三、Chrome DevTools MCP 是什么

Chrome DevTools MCP 是一个 MCP Server，它将 Chrome DevTools Protocol（CDP） 封装成 AI 可调用的工具，让 AI 能够直接控制 Chrome 浏览器。

3.1 核心能力

功能	工具名	说明	测试场景
页面导航	navigate	打开指定 URL	访问待测页面
截图	screenshot	对页面或元素截图	视觉测试、生成报告
获取内容	get_content	获取页面 HTML	检查页面结构
执行 JS	evaluate	在浏览器运行代码	自定义测试逻辑
网络监控	network	查看网络请求	API 接口测试
表单交互	type / click	填写表单、点击按钮	登录流程测试
等待	wait_for	等待元素出现	异步内容测试

3.2 安装配置

前置条件：

• Node.js（v18+）

• Chrome 浏览器

• Claude Desktop 或其他支持 MCP 的 AI 客户端

步骤 1：安装 MCP Server

# 方式一：全局安装（推荐）
npm install -g @anthropic-ai/mcp-server-puppeteer

# 方式二：使用 npx（免安装）
npx -y @anthropic-ai/mcp-server-puppeteer

步骤 2：配置 Claude Desktop

编辑配置文件 claude_desktop_config.json：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-puppeteer"],
      "env": {
        "PUPPETEER_LAUNCH_OPTIONS": "{\"headless\": false, \"args\": [\"--no-sandbox\", \"--disable-gpu\"]}"
      }
    }
  }
}

配置说明：

参数	说明
headless: false	显示浏览器界面（调试用）
headless: true	无头模式（不显示界面，适合自动化）
--no-sandbox	禁用沙箱（Linux/Docker 环境需要）
--disable-gpu	禁用 GPU 加速

步骤 3：重启 Claude Desktop

配置完成后需要重启 Claude Desktop，新的 MCP Server 才会生效。

在谷歌浏览器中也要打开这个选项

3.3 使用示例

配置完成后，在 Claude 中可以直接用自然语言指令：

页面加载测试：

请打开 http://localhost:8080，截图检查页面是否正常加载，告诉我页面标题是什么

登录功能测试：

1. 打开 http://localhost:5173/login
2. 在手机号输入框输入 "13800138000"
3. 点击获取验证码按钮
4. 在验证码输入框输入 "123456"
5. 点击登录按钮
6. 等待 2 秒后截图
7. 检查是否跳转到首页

API 接口测试：

1. 打开 http://localhost:8080
2. 打开浏览器开发者工具的网络面板
3. 刷新页面
4. 找到 /api/v1/reviews 请求
5. 检查状态码是否为 200
6. 检查返回数据是否包含 list 字段

可以直接让claude来打开,直接用自然语言进行操作

可以通过直接在前端模拟点击来达到自动化测试的效果

也可以用于学习通答题

3.4 常见问题

问题	原因	解决方案
MCP Server 无法启动	Node.js 版本过低	升级到 v20+
浏览器无法打开	端口被占用	关闭其他 Chrome 进程
元素找不到	页面未加载完成	添加等待时间
中文乱码	编码问题	设置 UTF-8 编码
截图模糊	分辨率问题	设置设备像素比

---

四、在食友项目中的应用

4.1 测试模块

测试模块	测试内容	优先级
首页信息流	页面加载、评价列表展示、分页功能	P0
搜索功能	搜索店铺/评价、结果展示、筛选条件	P0
发布评价	表单填写、图片上传、评分选择	P0
登录注册	手机号登录、验证码流程、Token 刷新	P0
店铺详情	店铺信息展示、评价列表	P1
个人中心	个人信息、我的评价、我的点赞	P1
管理后台	列表操作、审核流程、权限校验	P1

4.2 详细测试用例

首页测试

## TC001 - 首页加载测试

**前置条件：** 前后端服务已启动

**测试步骤：**
1. 打开 http://localhost:5173
2. 等待页面加载完成
3. 截图保存首页状态

**预期结果：**
- 页面标题显示"食友"
- 评价列表正常显示
- 分页组件显示

**检查点：**
- [ ] 页面无报错
- [ ] 评价卡片显示图片、标题、评分
- [ ] 分页按钮可点击

搜索测试

## TC002 - 搜索功能测试

**测试步骤：**
1. 打开首页
2. 在搜索框输入"食堂"
3. 点击搜索按钮
4. 等待搜索结果
5. 截图保存

**预期结果：**
- 搜索结果包含"食堂"相关评价
- 结果数量正确

**检查点：**
- [ ] 搜索框输入正常
- [ ] 搜索结果列表显示
- [ ] 结果与关键词相关

登录测试

## TC003 - 登录流程测试

**测试步骤：**
1. 打开 http://localhost:5173/login
2. 输入手机号 "13800138000"
3. 点击"获取验证码"
4. 输入验证码 "123456"
5. 点击"登录"
6. 等待 3 秒
7. 截图

**预期结果：**
- 登录成功，跳转到首页
- 首页显示用户头像

**检查点：**
- [ ] 手机号输入框正常
- [ ] 验证码发送成功提示
- [ ] 登录按钮可点击
- [ ] 跳转到首页
- [ ] 用户信息显示

4.3 测试报告生成

测试完成后，可以让 AI 生成测试报告：

请根据刚才的测试结果，生成一份测试报告，包含：
1. 测试时间
2. 测试模块
3. 通过/失败用例数
4. 失败用例详情
5. 发现的问题

4.4 自动化测试流程

1. 环境准备
   - 启动后端服务
   - 启动前端服务
   - 确认服务正常

2. 功能测试
   - 首页加载
   - 搜索功能
   - 登录注册
   - 发布评价
   - 店铺详情

3. 回归测试
   - 修复 bug 后重新测试
   - 确认问题已解决

4. 测试报告
   - 生成测试报告
   - 提交问题单

---

五、注意事项

AI可能无法处理复杂的验证码,需要人工干预,比如图形化人机验证