🔥 Search Hot Tweets

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