使用 DevTools 进行浏览器测试

概览

使用 Chrome DevTools MCP，让你的 agent 看到浏览器里的情况。这弥合了静态代码分析与真实浏览器执行之间的差距：agent 可以看到用户看到的内容，检查 DOM，读取 console logs，分析 network requests，并捕获 performance data。不要猜运行时发生了什么，要验证它。

何时使用

• 构建或修改任何会在浏览器中渲染的内容
• 调试 UI 问题（布局、样式、交互）
• 诊断 console errors 或 warnings
• 分析 network requests 和 API responses
• 分析性能（Core Web Vitals、paint timing、layout shifts）
• 验证修复在浏览器中实际有效
• 通过 agent 进行自动化 UI 测试

何时不使用： 仅后端改动、CLI 工具，或不在浏览器中运行的代码。

设置 Chrome DevTools MCP