用 AI 开发网页应用，很大一个痛点就是 AI 工具看不到网页运行情况（Codebuddy支持页面预览，多数工具目前还达不到），需要去 Chrome Dev Tool 手动截图。
一个月前我也发布过相关的文章 ➡️Chrome MCP 服务器——让AI操作浏览器帮你干活
现在官方 Chrome DevTools MCP 发布了，可以集成到你常用 Coding 工具中，如 Claude Code、Codex、Qoder、Cursor，这样就可以直接使用 Chrome DevTools 调试网页。
安装要求
- Node.js
22.12.0以上，多个版本可以用 nvm 管理。
安装方法
以 Claude Code 为例，CLI 类 都可以这样安装：
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest连接成功
查看工具，目前是26个
如果是 Qoder、Cursor、Codebuddy 这类IDE，直接 把下面内容 配置到MCP 服务里即可
{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest"] } } }工具一览
牛刀小试一下，查一下我在CSDN的信息
附谷歌官方博客原文：
适用于 AI 代理的 Chrome 开发者工具 (MCP)
作者：Chrome 开发者团队
我们今天推出了新的 Chrome 开发者工具模型上下文协议 (MCP) 服务器的公开预览版，将 Chrome 开发者工具的强大功能带给 AI 编码助理。
编码代理面临一个根本性问题：它们无法看到自己生成的代码在浏览器中运行时实际执行的操作。他们实际上是在蒙着眼睛编程。
Chrome 开发者工具 MCP 服务器改变了这种情况。AI 编码助理可以直接在 Chrome 中调试网页，并受益于开发者工具的调试功能和性能洞见。这有助于他们更准确地识别和修复问题。
什么是 Model Context Protocol (MCP)？
Model Context Protocol (MCP) 是一种开放源代码标准，用于将大语言模型 (LLM) 连接到外部工具和数据源。Chrome 开发者工具 MCP 服务器可为 AI 代理添加调试功能。
例如，Chrome DevTools MCP 服务器提供了一种名为 performance_start_trace 的工具。当需要调查网站的性能时，LLM 可以使用此工具启动 Chrome、打开您的网站，并使用 Chrome 开发者工具记录性能轨迹。然后，LLM 可以分析性能轨迹，以提出潜在的改进建议。借助 MCP 协议，Chrome 开发者工具 MCP 服务器可以为您的编码代理带来新的调试功能，使其能够更好地构建网站。
如果您想详细了解 MCP 的运作方式，请参阅 MCP 文档。
您可以使用它做什么？
以下是一些示例提示，您可以在自己选择的 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.
如需查看所有可用工具的列表，请参阅我们的工具参考文档。
开始使用
如需试用此功能，请将以下配置条目添加到您的 MCP 客户端：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}如需检查其是否正常运行，请在编码代理中运行以下提示：
Please check the LCP of web.dev.
如需了解详情，请查看 GitHub 上的 Chrome 开发者工具 MCP 文档。
