当前位置: 首页 > news >正文

再见Playwright!谷歌官方Chrome DevTools MCP正式发布,AI编程效率再翻倍

在使用 AI 编程过程中,想让 AI 帮忙写一个前端页面,他哐哐哐写一大堆,结果一运行不是样式错乱,就是控制台报错。这个时候你把截图发给 AI,它道个歉,然后再给你生成一版错误的代码。

因为 AI它并不知道自己写的代码在浏览器里面发生了什么。就像谷歌在官方博客中说的,此时的 AI 相当于是在蒙着眼睛狂奔。

img

之前,我们用 Playwright MCP 来解决这个问题,但是 Playwright 有一个问题就是,它配置起来相对来说比较麻烦,执行的时候消耗的 Token 量非常多。

现在游戏规则变了,Google 官方亲自下场了!他们推出了Chrome DevTools MCP,一个更轻、更快、更强的原生解决方案。

可以说,它让我们的AI Agent,第一次真正长出了火眼金睛。【gzh:和平本记】

1、Chrome DevTools MCP强在哪?

1、出身正统,Google 亲儿子

我们之前用的Playwright MCP,非常强大。可以操控它自己拉起的 Chromium,直接和 Chrome 内部的调试接口通信,从而做到操控浏览器。

但是你如果想让它操作你的真实 Chrome 浏览器(你平时用的那个,带插件、带登录态)。这时候需要一个 Chrome 扩展当桥,把 AI 指令(来自 MCP)安全地转发给真实浏览器

img

另外一点,Playwright 毕竟是一个第三方社区方案。万一哪天Chrome更新了,会不会这个桥接就失效了?这种非官方的工具多多少少会有那么一点点风险。

而 Chrome DevTools MCP是谷歌Chrome团队的亲儿子,是直接从浏览器内核层面提供的原生支持。这意味着它拥有最高的稳定性和兼容性。

img

2、配置简单,开箱即用

想要操作浏览器,不需要专门安装一个额外的桥接扩展程序。只需要一段 JSON 代码,配置好 MCP 即可。【gzh:和平本记】

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

你的工作,就是复制粘贴上面的 JSON 代码到 MCP 客户端。剩下的,交给谷歌。

3、Token消耗更低,更省钱

如果你是 AI agent 重度用户,那你肯定知道在 AI 编程过程中,最宝贵的资源莫过于上下文窗口。每一个Token都关乎成本,也决定了我们的AI能记住多少事。

Playwright MCP虽然好用,但它作为一个话痨,每次交互都会吃掉大量的Token。

Chrome DevTools MCP在这方面做出了巨大的优化。因为它更原生,所以传递信息所需的废话更少,效率更高。

别的工具想要操作 Chrome 浏览器,就需要中间有一个翻译官,信息传递过程中多了一个角色,就会造成信息的冗余或者缺失。

经过实测,在完成同样一个任务后,Playwright MCP消耗了26%(52k/200k tokens)的上下文,而Chrome DevTools MCP只消耗了21%(43k/200k tokens)

这5%的差距,可能就是你在一次长对话中,AI会不会提前失忆的关键。日积月累,这为你省下的不仅是Token,更是实打实的金钱和效率。

4、功能更强大

Playwright的核心能力,本质上还是模拟用户操作。比如,点点鼠标、填填表单。

它能告诉 AI 做了什么,但很难告诉AI发生了什么,比如控制台里有没有报错?某个网络请求是不是404了?

Chrome DevTools MCP 则完全是另一个维度。它把整个Chrome开发者工具(就是你按F12看到的那个)的能力都开放给了AI。比如:

1)调试实时样式和布局问题

让 AI 助手连接到实时页面,检查 DOM 和 CSS,并根据浏览器中的实时数据,针对诸如元素溢出等复杂的布局问题提供具体的修复建议。

2)自动化性能审计

让 AI 助手运行性能跟踪,分析结果,并深入调查特定的性能问题

3)分析控制台问题

包括读取所有控制台日志,自动发现错误。分析所有网络请求,定位 API 问题。【gzh:和平本记】

2、实操教程,让你迅速上手

1、要求

1️⃣ Node.js 22.12.0 以上

2️⃣ npm

验证方式:

img

2、安装

把下面的 MCP 节省配置按需复制到你的 MCP 客户端中。

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

Claude Code CLI 安装:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

img

3、案例演示

1)模拟用户行为

帮我打开 bilibili,然后搜索影视飓风,给我总结影视飓风最近一个月的视频链接

最后 AI 给出的结果:

img

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

帮我查看一下哔哩哔哩前端控制台有没有什么报错

img

它会自动帮你去查看页面控制台查看错误

img

img

3)实时调试样式和布局问题

在哔哩哔哩找到影视飓风的主页,然后把影视飓风账号名称这四个字颜色换成绿色【gzh:和平本记】

更换前的样子:

img

更换后的样子:

img

3、总结

Chrome DevTools MCP 的发布虽然仅仅是一个工具的升级,但是当AI拥有了视觉(页面截图)和感知(DevTools),它解决问题的能力将呈指数级增长。

通过为 AI 代理提供视觉和分析能力,它将 AI 从一个单纯的代码编写者转变为一个能够理解、调试和优化 Web 应用的真正助手,极大地提升了我们的开发效率

http://www.hskmm.com/?act=detail&tid=18448

相关文章:

  • Markdown 之——清单の语法
  • “计算理论之美”课程笔记一:概率
  • “计算理论之美”课程笔记四:高维空间组合优化
  • git分支从dev迁移到maser
  • Centos7安装ffmpeg
  • 2025.9.26总结
  • C++ 与现代并发编程:性能与复杂度的平衡艺术
  • 第五天
  • 926
  • 20250736
  • sql优化个人总结
  • Powershell 入门
  • 漏洞赏金猎手的新年目标实战指南
  • 数学作业
  • lc1037-有效的回旋镖
  • 日常刷题:cf每日一题+abc+反思复盘
  • 题解:P13523 [KOI 2025 #2] 序列与查询
  • 2025年9月26日 - 20243867孙堃2405
  • HarmonyOS 5 网络编程与材料存储实战:从RESTful API到本地持久化
  • 老系统-新系统的数据迁移
  • C语言中的for循环
  • excell中完成矩阵的转置相乘
  • go 面试题
  • 论文笔记:How Can Recommender Systems Benefit from Large Language Models: A Survey - 详解
  • newDay04
  • 5.WPF控件---ComboBox - 实践
  • SQLserver 通过本地方式改SA密码
  • 2_2025.9.26_2
  • k8s部署Prometheus实战