Chrome DevTools – 集成至各类Coding Agent 调试AI开发网页应用

现在用 AI 开发网页应用，一个痛点就是 AI 看不到网页运行情况，需要去 Chrome Dev Tool 手动截图，但现在有 Chrome DevTools 的 MCP 工具了，可以集成到你喜欢的 Coding Agent，比如 Codex、Claude Code、GitHub Copilot，这样这些 Agents 可以直接使用 Chrome DevTools 调试网页。

---

安装方法和常用提示词如下：

——-

Chrome DevTools 为 AI 智能体推出 MCP 协议 | 博客
作者：Chrome 开发者团队

今天，我们正式发布了 Chrome DevTools 模型上下文协议（Model Context Protocol，简称 MCP） 服务器的公开预览版。通过这个新工具，你的 AI 编程助手将可以直接使用 Chrome DevTools 强大的调试功能，极大提升网页开发效率。

很多 AI 编程助手都存在一个基本的缺陷：它们并不能看到自己生成的代码在浏览器中的真实运行状况，就像是闭着眼睛写代码一样。

而 Chrome DevTools MCP 服务器的出现，彻底解决了这个问题。AI 智能体现在能够直接在 Chrome 浏览器中调试网页，享受到 DevTools 的调试功能和性能分析能力，这能有效提高它们定位和修复问题的准确性。

你可以观看下面的视频，直观感受一下：

⸻

什么是模型上下文协议（MCP）？

模型上下文协议（MCP）是一套开源标准，专门用于将大语言模型（LLMs）与外部工具和数据源进行连接。而 Chrome DevTools MCP 服务器正是利用了这一协议，为 AI 智能体带来了浏览器级的调试能力。

举个例子：Chrome DevTools MCP 提供了一个叫做 performance_start_trace 的工具。当你要求 AI 智能体分析网站性能时，它可以调用这个工具自动启动 Chrome、打开你的网页，并记录下性能追踪（performance trace）。随后，AI 智能体可以分析这些数据，为你提供具体的优化建议。

简单来说，Chrome DevTools MCP 让你的 AI 智能体更擅长网页开发中的调试与优化。

想了解更多细节？可以查阅 MCP 官方文档。

⸻

MCP 可以为你做什么？

以下是一些具体示例，你可以用自己喜欢的 AI 工具（例如 Gemini CLI）立即体验一下：

✅ 实时验证代码修改

用 AI 智能体生成修复方案后，立即让 Chrome DevTools MCP 在浏览器中验证修改是否达到了预期效果。

你可以试试这个提示：

Verify in the browser that your change works as expected.

✅ 快速诊断网络和控制台错误

AI 智能体能分析网络请求，快速定位 CORS 跨域错误，或检查控制台日志，弄清楚为什么功能没有按预期运行。

你可以试试这个提示：

A few images on localhost:8080 are not loading. What’s happening?

✅ 模拟用户行为

智能体可以自动浏览网页、填写表单、点击按钮，重现 bug 和测试复杂的用户流程，并实时查看运行环境。

你可以试试这个提示：

Why does submitting the form fail after entering an email address?

✅ 调试实时样式和布局问题

让 AI 智能体直接连接到实时网页，检查 DOM 和 CSS，快速给出如何解决布局错乱或元素溢出问题的具体建议。

你可以试试这个提示：

The page on localhost:8080 looks strange and off. Check what’s happening there.

✅ 自动化性能审查

AI 智能体能自动进行性能追踪分析，诊断具体的性能瓶颈，比如过高的 LCP（最大内容绘制）指标。

你可以试试这个提示：

Localhost:8080 is loading slowly. Make it load faster.

完整的工具列表可参考工具参考文档。

⸻

快速开始使用

想尝试一下？在你的 MCP 客户端配置中添加以下内容即可：

{
“mcpServers”: {
“chrome-devtools”: {
“command”: “npx”,
“args”: [“chrome-devtools-mcp@latest“]
}
}
}

测试配置是否成功，可以运行以下提示：
> Please check the LCP of web .dev.

更多详细操作步骤，请访问 Chrome DevTools MCP 官方文档。

https://developer.chrome.com/blog/chrome-devtools-mcp?hl=en

更多AI软件请访问：

https://www.gewuzhizhi.vip/software-store/all-software-store/ai-software

★★★ 强烈推荐 ★★★ 点击下图，500+常用办公精品软件一键直达！

常用生产力软件大宝荐【持续更新】