当前，使用vibe coding开发前端界面时候，比特派app基本上都是盲目看代码或者是加日志，然后用户去console拷贝过来告诉它为啥失败，非常的繁琐。最关键的是，对于部分不懂前端的同学，调试前端代码太难了，根本不知道为何他没有理由，为何报错，为何长度不对…

现在Chrome官方推出Chrome DevTools MCP，可以直接安装到任何你喜欢的vibe ide中，比如claude code，codex，gemini cli，cursor或者是qoder中，这样这些 Agents 可以直接使用 Chrome DevTools 调试网页。不仅可以运行性能跟踪、检查 DOM 还能对网页执行实时调试。

主要特点 ✅可靠的自动化：它可以轻松地以编程方式处理点击、表单填写、对话框和页面导航。 ✅性能洞察：超越简单的审计。指导您的代理记录性能轨迹，并提取可操作的洞察，以优化您的 Web 应用。 ✅高级调试：使您的 AI 能够分析网络请求、列出控制台消息、截取屏幕截图，甚至在浏览器环境中评估脚本。 ✅浏览器模拟：通过模拟 CPU 减速、网络限制或各种屏幕尺寸轻松测试不同的条件。

安装方法

将如下mcp服务配置到任何你喜欢的vibe ide中，还有人不会配置吗？

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

提示词示例

1. 实时验证代码更改

使用AI Agent生成修复，然后自动验证解决方案是否按预期与Chrome DevTools MCP工作。

代码语言：javascript

AI代码解释

Verify in the browser that your change works as expected.

2. 诊断网络和控制台错误

授权Agent分析网络请求以发现CORS问题或检查控制台日志，以了解功能无法按预期工作的原因。

代码语言：javascript

AI代码解释

A few images on localhost:8080 are not loading. What's happening?

3. 模拟用户行为

导航、填写表格和单击按钮以重现错误并测试复杂的用户流程，同时检查运行时环境。

代码语言：javascript

AI代码解释

Why does submitting the form fail after entering an email address?

4. 调试实时样式和布局问题

要求AI Agent连接到实时页面，检查DOM和CSS，并获得具体建议来修复复杂的布局问题，例如基于浏览器实时数据的溢出元素。

代码语言：javascript

AI代码解释

The page on localhost:8080 looks strange and off. Check what's happening there.

5. 自动化绩效审计

指示Agent运行性能跟踪，分析结果，并调查高LCP数字等特定性能问题。

代码语言：javascript

AI代码解释

Localhost:8080 is loading slowly. Make it load faster.

总结

本来开发网页，DevTools就是少不了的一环，现在Chrome把MCP这个环节补全了，简直完美！而且这个东西，也不只是vibe coding时候有用，他也支持自动化测试啊，不知道是否可以通过语言来制定测试的流程，以前这些都要手写，着实麻烦！