Chrome DevTools MCP：让AI代理直接操控浏览器

今天聊个刚火起来的开源项目——Chrome DevTools MCP。今天刚在GitHub上飙到40882颗星，Chrome团队官方出品。

它解决什么问题

你试过让AI帮你调试网页吗？通常流程是：你把截图或错误信息丢给AI，AI给你分析，然后你自己去DevTools里操作。

这很割裂。AI只能看静态信息，没法像人一样在浏览器里实时操作——点击、检查元素、改样式、看网络请求。

Chrome DevTools MCP 就是解决这个的。它让AI代理能直接操控Chrome DevTools，像人一样在浏览器里干活。

核心思路：MCP协议

MCP（Model Context Protocol）是Anthropic提出的标准，让AI模型能调用外部工具。Chrome DevTools MCP就是把这个协议嫁接到DevTools上。

说白了，它定义了一组「工具」：

  • 打开页面
  • 截取屏幕
  • 点击元素
  • 获取控制台日志
  • 修改CSS
  • ...

AI代理可以通过这些工具，像操作API一样操作浏览器。

直接可用的Prompt模板

下面这个Prompt是我测试过的，让AI用Chrome DevTools MCP帮你调试一个页面。

markdown
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 
你是一个前端调试专家，使用Chrome DevTools MCP工具来帮我诊断页面问题。

当前页面URL：{你的页面URL}

请按以下步骤操作：
1. 打开页面并截取全屏截图
2. 打开Chrome DevTools的Console面板，检查是否有报错
3. 打开Network面板，检查所有请求的状态码，列出所有非200的请求
4. 在Elements面板中检查页面根元素的CSS属性，找出可能导致布局问题的样式
5. 给我一份报告，包含：
   - 控制台错误摘要
   - 网络请求异常列表
   - 可能的布局问题及修复建议
   - 性能瓶颈（如果有）

注意：每次操作后，请告诉我你做了什么，以及看到了什么。

效果演示：差Prompt vs 好Prompt

差Prompt

text
1 
帮我调试这个页面：https://example.com

AI可能给出泛泛的建议，比如「检查网络请求」「看看控制台错误」——全是正确的废话，因为AI没权限进浏览器。

好Prompt（用上述模板）

AI会：

  1. 调用 browser_screenshot 工具截取页面
  2. 调用 console_getLogs 工具拉取所有控制台日志
  3. 调用 network_getRequests 列出所有请求
  4. 调用 elements_getComputedStyle 获取元素样式
  5. 最后综合输出报告

实测效果：我让AI调试一个报404的页面，AI用DevTools MCP在3秒内定位到两个缺失的CSS文件，并给出替换建议。

为什么这样写有效

这个Prompt的关键在于「步骤拆分」和「明确输出格式」。

  • 步骤拆分：告诉AI先做什么、再做什么，避免它跳过关键诊断环节。
  • 明确输出格式：要求报告包含具体字段，AI知道要输出什么信息，不会漏掉。
  • 工具调用提示：通过描述性语言（如「打开DevTools的Console面板」），暗示AI调用对应工具。

变体和扩展

1. 性能审计

text
1 2 3 4 5 
使用Chrome DevTools MCP对当前页面做性能审计：
1. 用Performance面板录制5秒
2. 找出Long Tasks，列出每个的持续时间
3. 分析主线程阻塞原因
4. 给出3条优化建议，按优先级排序

2. 表单验证测试

text
1 2 3 4 5 6 7 
测试这个页面的表单验证：
1. 用空值提交表单
2. 截取错误提示
3. 用无效邮箱格式提交
4. 截取错误提示
5. 检查控制台有无相关报错
6. 总结所有验证规则及测试结果

3. 样式对比（A/B测试）

text
1 2 3 4 5 
对比页面在桌面端和移动端的样式差异：
1. 在桌面视口（1920x1080）截图
2. 切换到移动端视口（375x667）截图
3. 对比两个版本的Flex/Grid布局差异
4. 列出需要调整的CSS断点

注意事项

  1. 需要Node.js环境：目前是CLI工具，需要npx @anthropic/chrome-devtools-mcp启动
  2. 只支持Chrome：毕竟叫Chrome DevTools
  3. 安全风险：让AI代理操作浏览器，建议只在沙盒环境使用
  4. 成本问题：每次调用DevTools工具都会消耗API token，长会话注意控制

我的看法

这个项目最大的价值不是「又多了一个AI工具」，而是把AI的「看」变成了「做」。以前AI只能看截图、读代码，现在它能亲手操作浏览器，这就像让实习生直接上机而不是只看报告。

但要注意：目前还是早期阶段，工具集不够丰富（比如没有WebSocket拦截、没有Service Worker调试），而且稳定性有待验证。不过Chrome团队出品，后续迭代应该很快。

去试试吧，尤其适合自动化测试、性能审计、QA场景。把你的调试工作流交给AI代理，你会发现效率翻倍。