Development
使用 DevTools 进行浏览器测试
通过 Chrome DevTools MCP 在真实浏览器中进行测试。在构建或调试浏览器中运行的任何内容时使用。
使用 Chrome DevTools MCP 为你的 agent 提供浏览器的"眼睛"。验证运行时行为，而非猜测。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
}
}
}
| 工具 | 功能 | 使用场景 | |------|------|---------| | Screenshot | 捕获当前页面状态 | 视觉验证 | | DOM Inspection | 读取实时 DOM 树 | 验证组件渲染 | | Console Logs | 获取控制台输出 | 诊断错误 | | Network Monitor | 捕获网络请求 | 验证 API 调用 | | Performance Trace | 记录性能计时 | 分析加载时间 | | Element Styles | 读取计算样式 | 调试 CSS 问题 | | Accessibility Tree | 读取无障碍树 | 验证屏幕阅读器体验 |
1. 复现
└── 导航到页面，触发 bug
└── 截图
2. 检查
├── 检查控制台错误
├── 检查 DOM 元素
├── 读取计算样式
└── 检查无障碍树
3. 诊断
├── 对比实际与预期 DOM
├── 对比实际与预期样式
└── 确定根本原因（HTML？CSS？JS？数据？）
4. 修复
└── 在源代码中实施修复
5. 验证
├── 重新加载页面
├── 截图
├── 确认控制台干净
└── 运行自动化测试
1. 捕获
└── 打开网络监视器，触发操作
2. 分析
├── 检查请求 URL、方法和头部
├── 验证请求体
├── 检查响应状态码
└── 检查响应体
3. 诊断
├── 4xx → 客户端发送了错误数据
├── 5xx → 服务器错误
├── CORS → 检查 Origin 头部
└── 超时 → 检查服务器响应时间
4. 修复并验证
└── 修复问题，重放请求，确认
1. 基线
└── 录制性能跟踪
2. 识别
├── 检查 LCP、CLS、INP
├── 识别长任务（> 50ms）
└── 检查不必要的重渲染
3. 修复
└── 解决特定瓶颈
4. 度量
└── 再次录制跟踪，对比
ERROR 级别：
├── 未捕获异常 → 代码中的 bug
├── 网络请求失败 → API 或 CORS 问题
├── React/Vue 警告 → 组件问题
└── 安全警告 → CSP、混合内容
WARN 级别：
├── 废弃警告 → 未来兼容性
├── 性能警告 → 潜在瓶颈
└── 无障碍警告 → a11y 问题
干净控制台标准： 生产级页面应有零控制台错误和警告。
1. 读取无障碍树
└── 确认所有交互元素都有无障碍名称
2. 检查标题层级
└── h1 → h2 → h3（不跳级）
3. 检查焦点顺序
└── Tab 遍历页面，验证逻辑顺序
4. 检查颜色对比
└── 验证文本满足 4.5:1 最低对比度
5. 检查动态内容
└── 验证 ARIA live region 正确宣布变更
在任何面向浏览器的变更后：