现在用 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 官方文档。
