作者 / Mathias Bynens 和 Michael Hablich

我们推出了新版 Chrome 开发者工具模型上下文协议 (MCP) 服务器的公开预览版，将 Chrome 开发者工具的强大功能引入 AI 编码助理。

当前的编码智能体面临一个根本性问题: 它们无法看到自己生成的代码在浏览器中实际运行的效果，如同蒙着眼睛编程。

Chrome 开发者工具 MCP 服务器改变了这一现状。AI 编码助理可以直接在 Chrome 中调试网页，并从开发者工具的调试能力和性能洞察中获益。这提高了它们识别和修复问题的准确性。

您可以亲自体验其运作方式:

什么是 MCP？

模型上下文协议 (MCP) 是一种开放标准，用于将大语言模型 (LLM) 连接到外部工具和数据源。Chrome 开发者工具 MCP 服务器为 AI 智能体提供了网页调试能力。

• 模型上下文协议 (MCP)

  https://www.anthropic.com/news/model-context-protocol

例如，Chrome 开发者工具 MCP 服务器提供了一个名为 performance_start_trace 的工具。当需要调查网站的性能时，LLM 可以使用此工具启动 Chrome、打开您的网站，并使用 Chrome 开发者工具记录性能追踪数据。然后，LLM 可以分析追踪数据，以提出潜在的优化建议。借助 MCP 协议，Chrome 开发者工具 MCP 服务器可以为您的编码智能体赋予新的调试能力，使其在网站构建过程中表现更加出色。

如果您想详细了解 MCP 的运作方式，请参阅 MCP 文档。

• MCP 文档

  https://modelcontextprotocol.io/docs/getting-started/intro

它有何用途？

以下是一些示例提示，您可以在自己选择的 AI 助理 (例如 Gemini CLI) 中试用。

实时验证代码变更

使用 AI 智能体生成修复方案，然后使用 Chrome 开发者工具 MCP 自动验证该解决方案是否按预期运行。

建议使用的提示:

Verify in the browser that your change works as expected.

诊断网络和控制台错误

让您的智能体能够分析网络请求以发现 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.

您可以参阅我们的工具参考文档查看所有可用工具的列表。

• 工具参考文档

  https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

开始使用

如需试用此功能，请将以下配置条目添加到您的 MCP 客户端:

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

如需检查其是否正常运行，请在编码智能体中运行以下提示:

Please check the LCP of web.dev.

如需了解详情，请查看 GitHub 上的 Chrome 开发者工具 MCP 文档。

• Chrome 开发者工具 MCP 文档

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

即刻参与

我们正在逐步构建 Chrome 开发者工具 MCP，目前发布的公开预览版只是一个起点。我们正在积极寻求您和社区的反馈，以便确定接下来应添加哪些功能。无论您是使用 AI 编码助理的开发者，还是致力于构建下一代 AI 开发工具的供应商，我们都期待听到您宝贵的反馈和建议。如果发现任何缺失或无法正常运行的情况，请在 GitHub 上提交您的问题。

• 在 GitHub 上提交您的问题

  https://github.com/ChromeDevTools/chrome-devtools-mcp/issues/new/choose

 点击屏末 | 阅读原文 | 了解更多 Chrome 开发者工具内容