AI 摘要：本文介绍了 Chrome 新发布的 DevTools MCP 服务，它通过 Model Context Protocol (MCP) 将大型语言模型 (LLM) 与 Chrome DevTools 连接，使 AI 编程助手能够实时调试网页、诊断错误、模拟用户操作、分析性能问题等，从而提升生成代码的可用性和准确性。文章同时提供了使用场景示例、配置方法以及社区参与途径。

1. 背景与意义
• AI 编程助手生成代码时往往无法看到运行效果，相当于“蒙着眼睛编程”。
• Chrome DevTools MCP 服务解决了这一问题，直接让 AI 编程助手接入浏览器调试环境。

2. Model Context Protocol (MCP) 概述
• MCP 是一个开源标准，用于连接大型语言模型 (LLM) 与外部工具和数据源。
• Chrome DevTools MCP server 将调试与性能分析能力引入 AI agent。
• 示例工具：performance_start_trace，可自动启动 Chrome 并记录性能数据以供分析。

3. 应用场景与示例
• 实时验证代码修改：AI agent 可直接在浏览器中确认修改是否生效。
• 诊断网络与控制台错误：AI 可检查网络请求和日志，排查如 CORS 问题。
• 模拟用户行为：自动执行表单填写、点击测试，复现功能性 bug。
• 调试样式与布局问题：实时检查 DOM 和 CSS，解决复杂样式错误。
• 自动化性能审计：运行性能追踪，分析如 LCP (Largest Contentful Paint) 等指标。

4. 使用与配置方法
• 配置方式：在 MCP client 中添加 chrome-devtools 服务。
• 测试示例：运行 prompt "Please check the LCP of web.dev."。
• 更多工具参考：见 tool reference documentation。

5. 社区参与与后续发展
• 当前为公测版本，功能会逐步增加。
• 欢迎开发者与厂商反馈需求与问题。
• 参与方式：通过 GitHub issue 提交建议或 bug。

Chrome for Developers

Chrome DevTools (MCP) for your AI agent  |  Blog  |  Chrome for Developers

Public preview for the new Chrome DevTools MCP server, bringing the power of Chrome DevTools to AI coding assistants.