浏览器调试 MCP 接入指南

要解决的问题

前端开发里有一个反复出现的场景：改完代码、触发构建、打开浏览器——然后人盯着控制台看有没有报错。这个过程完全可以自动化，但难点在于编码代理（coding agent）默认看不到页面。它不知道 React 抛了哪个异常，不知道某个请求返回 500，也不知道 DOM 结构在改版后悄悄变了。

「浏览器调试 MCP 接入指南」要解决的就是这件事：让 AI 看见页面，调试才闭环。

它如何工作

这个技能把浏览器的 DevTools 能力以 MCP server 的形式暴露给编码代理。接入分几步：

• 接入 MCP server：在编码客户端里配置调试 MCP，让它作为工具源被调用。
• 连接浏览器实例：通过调试端口连接本地或远程浏览器，前提是浏览器以可调试模式启动（开启远程调试）。
• 使用可用能力：代理可以读取 DOM 结构与样式、控制台日志、网络请求与响应；可以截屏、做性能分析、执行受控脚本。

调试闭环的核心路径是：

1. 代理修改代码并触发页面刷新；
2. 读取控制台输出与 DOM 状态；
3. 判断验证是否通过；
4. 如果不通过，把报错文本或截图回灌给模型，进行下一轮迭代。

关键建议是在关键路径上加断言——验证标准不能只是「页面没报错」，而是确认预期的元素、状态或行为真实存在。

适用边界与注意点

这个能力不是无限制的：

• 只操作被授权的页面，不越权访问其他站点或凭据；
• 调试端口不暴露公网，防止未授权控制浏览器实例；
• 不注入或读取敏感凭据与 Cookie；
• 自动化操作应限制在测试环境或自有页面，遵守目标网站条款；
• 能力细节以官方 MCP 文档为准，建议先在小范围试点再推广。

把浏览器变成代理可观测的一环，调试就不再是人肉盯屏幕的体力活。