MCP 工具面：把调试能力变成可调用接口
将页面检查、网络请求观察、控制台读取、性能采样等能力暴露为 MCP tools，输入输出结构化，便于自动化与审计。
chrome-devtools-mcp 的定位很直接：把浏览器调试从“人盯着 DevTools 点来点去”变成“智能体按工具接口可重复执行”。它用 Model Context Protocol (MCP) 把页面检查、网络抓取、控制台观察、性能采样等动作封装为可调用的工具，并通过 Chrome DevTools Protocol 在底层驱动浏览器调试会话。对前端与全栈团队来说，这相当于把排障经验固化成可脚本化流程：同一个 bug 的复现步骤、关键证据与修复验证可以被自动跑一遍，减少口口相传与截图沟通。
| ✕传统痛点 | ✓创新方案 |
|---|---|
| 手动 DevTools 调试很难标准化：同一个问题不同人收集的证据不同，复现步骤也容易遗漏。 | chrome-devtools-mcp 把调试动作做成 MCP 工具，让智能体以结构化调用执行并返回可比对的证据。 |
| 测试工具更擅长“跑用例”，但对排障所需的 DOM/Network/Console/Performance 证据采集缺少统一接口。 | 用 CDP 作为底层执行面，把浏览器会话的观察与采样纳入可编排的调试流水线。 |
1node --version1git clone https://github.com/ChromeDevTools/chrome-devtools-mcp.git && cd chrome-devtools-mcp && npm install1npm run start1google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-devtools-mcp1# 在客户端配置中添加 server，然后调用一次 tools/list 或等价入口验证| 核心场景 | 目标人群 | 解决方案 | 最终收益 |
|---|---|---|---|
| 把线上疑难 bug 变成可复现的证据包 | 前端/全栈开发 | 自动抓 DOM 状态、关键请求、控制台错误与性能片段 | 把口述问题变成可重复运行的调试脚本与证据链 |
| CI 中的失败用例自动采证 | 维护 E2E/回归的团队 | 失败时自动导出 network/console/trace 片段 | 减少“只能在我电脑复现”的排障时间 |
| 客服/支持场景的页面取证与定位 | 技术支持与工程协作 | 用工具化方式收集页面状态与错误线索 | 更快定位问题归因并把信息传回研发 |
