Chrome DevTools MCP：让AI真的会开浏览器、看控制台、查性能

谷歌 Chrome 团队官方维护的 MCP 服务器。装上之后，AI 助手不再靠截图猜页面，而是能直接开真实浏览器、读控制台报错、抓网络请求、跑性能追踪——前端调试从「描述问题」变成「自己动手验证」。

它补上了AI编程助手最大的短板

现在多数 AI 编程工具改前端代码，只能看文件、猜效果。改完对不对，得你自己刷新页面看。

这个 MCP 服务器把真实浏览器交到模型手里：它能打开页面、点击元素、读取控制台日志、查看网络请求与响应、录制并分析性能追踪数据。

因为它读的是真实的运行时信息而不是截图，模型判断「这里为什么白屏」时会找到具体报错，而不是给一堆泛泛的猜测。

定位报错：让 AI 打开出问题的页面，读取控制台里的异常堆栈，再回到代码里改。

验证改动：改完样式或交互后，让它自己在页面上点一遍，确认逻辑跑通。

性能排查：跑一次性能追踪，看首屏是哪一段脚本卡住了，再给出优化方向。

接口对账：读取网络面板里的请求参数和返回体，对照后端接口文档找不一致的地方。

本站提供的是离线 npm 包（2.5MB）。有网络时最省事的做法是直接在命令行装：npm i -g chrome-devtools-mcp@1.10.1。

在 AI 工具的 MCP 配置文件里加一条记录即可，命令为 npx -y chrome-devtools-mcp@latest；只做简单任务时可以加 --slim --headless 参数让它以无界面模式运行，更省资源。

改完配置重启 AI 工具，看到工具列表里出现浏览器相关能力就说明接上了。

它会启动一个独立的浏览器实例，不会污染你日常使用的浏览器配置和登录状态。

首次运行会下载一个约百兆的浏览器内核，网络不通时可能失败，可先手动执行安装命令预热。

让 AI 操作真实站点时注意边界：涉及账号、支付的操作建议只在本地或测试环境跑。

本文整理自公开资料并附上配套资源；涉及产品的功能与价格以官方页面为准。资源仅供学习交流，请遵循来源许可。