告别盲写代码！Chrome 新工具为 AI 编程助手解锁调试能力

近期，谷歌正式推出 Chrome DevTools Model Context Protocol (MCP) 服务器的公开预览版，将 Chrome DevTools 的强大调试能力带入 AI 编程助手，助力开发者更高效地构建和优化网页应用。

为什么需要 Chrome DevTools MCP 服务器？

现在的 AI 编程助手有个致命伤 —— 它们根本看不到自己写的代码在浏览器里跑成啥样！完全就是在盲写代码啊！

想象一下：你让 AI 写个页面，结果样式崩了、图片加载失败、表单提交不了...

现在好了！Chrome DevTools MCP 服务器来了，让 AI 助手亲眼看到代码运行效果！

通过与 Chrome DevTools 的集成，AI 助手可以直接调试网页，获取性能与运行时数据，从而更精准地识别和修复问题。

什么是 Model Context Protocol (MCP)？

MCP（模型上下文协议） 是一个开源标准，旨在将大型语言模型（LLM）与外部工具和数据源无缝连接。

Chrome DevTools MCP 服务器基于 MCP 标准，为 AI 助手带来浏览器调试能力。例如：

1.借助 performance_start_trace 工具，LLM 可以启动 Chrome，打开指定网页，并通过 DevTools 录制性能追踪数据；

2.随后，LLM 能够基于这些数据进行分析，提出性能优化建议。

这一能力让 AI 编程助手不仅能生成代码，更能像开发者一样直接验证、诊断、优化网页。

告别盲写代码！Chrome 新工具为 AI 编程助手解锁调试

可以用来做什么？

以下是一些典型应用场景，你可以直接在支持 MCP 的 AI 助手（如 Gemini CLI）中尝试：

✅ 实时验证代码更改让 AI 代理生成修复方案，并自动通过 Chrome DevTools MCP 验证更改是否生效。

示例提示：在浏览器中验证一下我的修改是否按预期工作。

✅网络与控制台调试

分析网络请求，定位 CORS 或加载失败问题；查看控制台日志，追踪功能异常原因。

示例提示：localhost:8080 上有些图片无法加载。原因是什么？

✅ 模拟用户操作

执行页面导航、表单填写、按钮点击等操作，复现 Bug 并测试复杂用户流程。

示例提示：为什么输入邮箱后提交表单会失败？

✅ 样式与布局诊断

连接实时页面，检查 DOM 与 CSS，给出具体的排版修复建议，例如元素溢出或错位。

示例提示：localhost:8080 页面显示异常，帮我检查一下。

✅ 自动化性能审计

运行性能追踪，定位页面加载瓶颈（如 LCP 过高），并提出优化措施。

示例提示：localhost:8080 加载速度太慢，如何让它更快？

快速开始

在 MCP 客户端配置中添加以下内容即可启用：

{

"mcpServers": {

"chrome-devtools": {

"command": "npx",

"args": ["chrome-devtools-mcp@latest"]

}

}

}

然后尝试运行以下提示：


请检查 web.dev 的 LCP

更多使用细节请查阅 [Chrome DevTools MCP GitHub 文档]。

https://github.com/ChromeDevTools/chrome-devtools-mcp/?tab=readme-ov-file#chrome-devtools-mcp