Chrome 官方 MCP 发布，助你 Vibe coding debug 顺利修复

Chrome 官方 MCP 发布，助你 Vibe coding debug 顺利修复 Chrome 官方 MCP 发布，助你 Vibe coding debug 顺利修复 Modified September 25, 2025 Vibe coding 所谓编程一时爽，debug 到地老天荒。编写代码的过程是非常简单、丝滑的，但修复报错，是最消耗精力、最浪费时间的。 现在，Google Chrome 团队官方发布了一个 MCP，可以一定程度上帮你减轻这个问题。如果你用 Vibe coding 的方式做网站，它能帮你解决很大一部分痛苦。 如何安装 Claude code： 在命令行中执行 claude mcp add chrome devtools npx chrome devtools mcp@latest，注意，这里不是进入 claude 执行，而是直接在命令行中粘贴上述代码，就能成功。 前提条件是，你电脑上的 Node.js 版本要高于 Node.js 22.12.0。我装的时候报错了，查了半天，发现我的 Node.js 版本是 v.20，版本太低了，升级版本后就正常了。 其他工具的安装方式，请查阅：https://github.com/ChromeDevTools/chrome devtools mcp/?tab=readme ov file mcp client configuration 验证安装是否成功，启动 Claude code 之后，输入 /mcp，显示 chrome devtools connected 就说明成功了。 如何使用 在 Claude code 里，需要在调用的时候，明确说 use chrome mcp。 例如：Please check the LCP of word2md.net use chrome mcp 其他用法： • 使用 Chrome mcp 验证网站修复是不是完成了 • 使用 Chrome mcp 检查 console 的报错 • 使用 Chrome mcp 提交表单 • 使用 Chrome mcp 检查网页为什么加载速度慢，优化加载速度 Google Chrome 官方博客：https://developer.chrome.com/blog/chrome devtools mcp 点击阅读原文，可直接打开 word2md.net Vibe coding 所谓编程一时爽，debug 到地老天荒。编写代码的过程是非常简单、丝滑的，但修复报错，是最消耗精力、最浪费时间的。 现在，Google Chrome 团队官方发布了一个 MCP，可以一定程度上帮你减轻这个问题。如果你用 Vibe coding 的方式做网站，它能帮你解决很大一部分痛苦。 如何安装 Claude code： 在命令行中执行 claude mcp add chrome devtools npx chrome devtools mcp@latest，注意，这里不是进入 claude 执行，而是直接在命令行中粘贴上述代码，就能成功。 前提条件是，你电脑上的 Node.js 版本要高于 Node.js 22.12.0。我装的时候报错了，查了半天，发现我的 Node.js 版本是 v.20，版本太低了，升级版本后就正常了。 其他工具的安装方式，请查阅：https://github.com/ChromeDevTools/chrome devtools mcp/?tab=readme ov file mcp client configuration 验证安装是否成功，启动 Claude code 之后，输入 /mcp，显示 chrome devtools connected 就说明成功了。 如何使用 在 Claude code 里，需要在调用的时候，明确说 use chrome mcp。 例如：Please check the LCP of word2md.net use chrome mcp word2md.net 其他用法： • 使用 Chrome mcp 验证网站修复是不是完成了 • 使用 Chrome mcp 检查 console 的报错 • 使用 Chrome mcp 提交表单 • 使用 Chrome mcp 检查网页为什么加载速度慢，优化加载速度 Google Chrome 官方博客：https://developer.chrome.com/blog/chrome devtools mcp 点击阅读原文，可直接打开