“食友”后台怎么使用DevTools MCP-编程阁

什么是 Chrome DevTools MCP

Chrome DevTools MCP 是一个 Model Context Protocol 服务，它让 Claude 能够直接操控 Chrome DevTools，实现页面截图、DOM 检查、网络请求监控、控制台错误捕获、性能分析等能力。相当于给 Claude 装了一双"眼睛"，可以直接看到页面的实际渲染效果。

为什么这个项目需要它

食友后台是一个基于Next.js App Router + Ant Design Pro的管理系统，包含十几个功能页面（管理员、学校、店铺、标签、审核、榜单等）。开发过程中最常见的痛点：

改了样式不知道渲染对不对— 需要反复切浏览器看效果
接口报错难以定位— 需要手动打开 DevTools 看 Network 和 Console
页面白屏或组件不显示— 需要逐行排查代码
响应式布局问题— 需要在不同设备尺寸下截图对比
表单交互逻辑复杂— 新增/编辑/删除等弹窗流程需要实际操作验证

Chrome DevTools MCP 让 Claude 能直接帮你做这些事，不用你手动截图、复制错误信息。

核心能力与应用场景

1. 页面截图 — 验证 UI 渲染

场景：你让 Claude 写了管理员列表页面，想看看实际效果。

做法：Claude 通过 MCP 打开页面并截图，直接看到渲染结果，发现样式问题后立即修复。

你：帮我看看管理员列表页面渲染得对不对 Claude：[截图] 发现角色列没有正确显示 Tag 样式，修复如下...

适用页面：

/admins— 管理员列表（头像、状态 Tag、操作按钮布局）
/schools— 学校列表（城市 Tag、状态切换）
/shops— 店铺列表
/tags— 标签管理
/login— 登录页（左右分栏布局）

2. 网络请求监控 — 调试接口问题

场景：点击删除按钮后提示"删除成功"，但数据还在。

做法：Claude 通过 MCP 检查 Network 面板，查看实际发出的请求和响应。

你：删除功能好像没生效 Claude：[检查网络请求] DELETE /admins/5 返回 200，但 Mockoon 没有真正删除数据。 这是 Mock 服务器的限制，前端逻辑正确。

可以排查的问题：

请求 URL 是否正确（/adminsvs/admins/）
Query 参数是否正确传递（nick_name,role_id,status）
请求体格式是否匹配 API 规范
响应码和响应体是否符合预期
Token 是否正确携带（Authorization Header）

3. 控制台错误捕获 — 快速定位 Bug

场景：页面打开后控制台报错，但你不确定是哪个组件的问题。

做法：Claude 通过 MCP 读取 Console 输出，直接定位错误来源。

你：页面打开后有个报错 Claude：[读取控制台] Warning: Form already set 'initialValues' with path 'status'。 原因是 ModalForm 的 initialValues 和 ProFormSelect 的 initialValue 冲突， 已移除 ProFormSelect 上的 initialValue。

常见的可捕获错误：

React 渲染警告（key 重复、initialValues 冲突）
GET http://localhost:3000/string— avatar_url 为占位符"string"导致的图片加载失败
TypeScript 类型错误
未捕获的 Promise 异常

4. 表单交互验证 — 测试完整流程

场景：新增管理员弹窗写好了，想验证整个表单流程。

做法：Claude 通过 MCP 模拟操作：打开弹窗 → 填写表单 → 提交 → 检查结果。

你：帮我测试一下新增管理员的流程 Claude： 1. [截图] 当前管理员列表页 2. [点击] "新增管理员"按钮 3. [截图] 弹窗已打开，表单字段：账号、密码、昵称、头像URL、角色、状态 4. [填写] 账号: test01, 密码: 123456, 昵称: 测试用户 5. [提交] 点击确认 6. [检查网络] POST /admins 请求已发送 7. [截图] 列表已刷新，新增数据出现

适用的表单页面：

新增/编辑管理员（AdminFormModal）
新增/编辑学校（SchoolFormModal）
新增/编辑店铺（ShopFormModal）
新增/编辑标签（TagFormModal）

5. 响应式检查 — 多尺寸适配

场景：想确认页面在不同屏幕宽度下的布局表现。

做法：Claude 通过 MCP 调整视口尺寸并截图。

你：检查一下管理员列表在小屏幕下的表现 Claude： - [1920px 截图] 正常显示 - [1366px 截图] 操作列被压缩，Tooltip 正常显示 - [768px 截图] 表格出现横向滚动，布局正常

6. 样式微调 — 可视化对比

场景：觉得某个按钮的间距或颜色不对，想精确调整。

做法：Claude 通过 MCP 检查元素的计算样式，直接修改代码。

你：状态 Tag 的颜色感觉不太对 Claude：[检查元素] 当前 status=1 使用 color="success"（绿色）， status=0 使用 color="default"（灰色）。看起来符合设计，是否需要调整？

典型工作流示例

完整的页面开发流程

1. 你：帮我开发管理员列表页面 2. Claude 编写代码 3. Claude 通过 MCP 截图验证页面渲染 4. Claude 发现问题（如 avatar_url 为 "string" 导致图片加载失败） 5. Claude 立即修复并重新截图确认 6. 你拿到的已经是验证过的可用代码

Bug 修复流程

1. 你：页面有个报错 2. Claude 通过 MCP 读取 Console 错误信息 3. Claude 定位问题文件和行号 4. Claude 修改代码 5. Claude 通过 MCP 重新截图 + 检查 Console 确认修复

接口联调流程

1. 你：接口返回了但页面没显示数据 2. Claude 通过 MCP 检查 Network 请求和响应 3. Claude 发现响应字段名与前端类型不匹配（如 camelCase vs snake_case） 4. Claude 修改 service 层的字段映射 5. Claude 重新截图确认数据正确显示

使用前提

启动开发服务器—npm run dev，确保页面可访问
安装 Chrome DevTools MCP— 在 Claude Code 的 MCP 配置中添加 chrome-devtools 服务
Chrome 浏览器可用— MCP 需要连接到 Chrome 实例

适用的页面清单

页面	路径	MCP 可做的事
登录页	`/login`	验证表单布局、验证码加载、登录流程
工作台	`/dashboard`	截图验证数据卡片布局
管理员列表	`/admins`	列表渲染、搜索筛选、增删改查流程
学校管理	`/schools`	列表渲染、城市筛选、状态切换
店铺管理	`/shops`	列表渲染、待确认、合并记录
标签管理	`/tags`	标签列表、新增编辑
审核页面	`/audits/*`	审核流程、状态流转
榜单管理	`/rankings/*`	榜单任务、快照查看
系统设置	`/settings`	表单配置验证
操作日志	`/logs`	日志列表渲染