还在手动点点点？用 Chrome DevTools MCP 让 AI 帮你做 Web 测试

fcy222fcy

312人浏览 · 2026-06-20 17:33:35

fcy222fcy · 2026-06-20 17:33:35 发布

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可能无法处理复杂的验证码,需要人工干预,比如图形化人机验证

DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

腾讯的免费 DeepSeek V4.1 Flash，如何无缝衔接到你的工作流？

DeepSeek技术社区

大模型（DeepSeek）辅助 3D 实时建模 + 拖拽配置：业务可视化应用快速构建实践（标注、巡检与视角控制等）

DeepSeek技术社区

DeepSeek 涨价了，你换了吗？——技术选型与迁移指南

DeepSeek涨价致月成本翻倍至48000元，缓存命中价最高涨300%。替代模型A、B月成本分别约36000元、30000元。建议个人开发者降本续用，中小团队评估迁移或混合方案，大型企业分步迁移并保留回滚预案。通过缓存复用、请求合并与模型分层调用，可降低40%成本。综合成本、能力与迁移难度，使用五维评分表决策更科学。

DeepSeek技术社区

所有评论(0)

查看更多评论

fcy222fcy

@fcy222fcy

已为社区贡献2条内容

还在手动点点点？用 Chrome DevTools MCP 让 AI 帮你做 Web 测试

fcy222fcy

Chrome DevTools MCP的使用

一、Chrome DevTools 是什么

1.1 如何打开

1.2 核心面板详解

Elements 面板（最常用）

Console 面板

Network 面板（测试重点）

Application 面板

Sources 面板

Performance 面板

二、MCP 是什么

2.1 为什么需要 MCP

2.2 核心概念

2.3 工作流程

2.4 MCP vs 其他插件体系

概念对比表

详细区别说明

总结：什么时候用什么

MCP 的独特优势

2.5 MCP Server 的两种运行方式

2.5 配置文件详解

2.6 常见 MCP Server

2.7 调试 MCP

三、Chrome DevTools MCP 是什么

3.1 核心能力

3.2 安装配置

3.3 使用示例

3.4 常见问题

四、在食友项目中的应用

4.1 测试模块

4.2 详细测试用例

首页测试

搜索测试

登录测试

4.3 测试报告生成

4.4 自动化测试流程

五、注意事项

所有评论(0)

温馨提示：您尚未绑定手机号

fcy222fcy