背景
之前刷到一个库，style-extractor，体验其【提取目标页UI风格转为生成提示词】能力时，简单体验了一把 chrome-devtools-mcp 的效果，实操时发现是单独起一个临时目录的真实 chrome 来让ai接管，执行对应操作 （pc真实启动，可操作）
可以在chrome搜索框里，执行 chrome://version/ 命令查看对应的资料目录判断，如下图就是该mcp启动的chrome
下面呢就是正常主要我们在用的chrome
于是在想，既然可以起浏览器来跑了，是不是可以把日常前端开发时对chrome的操作、工作流程等，也接入 Vibe Coding 的流程里呢，于是有了这篇文档，来验证实际可用性
前置准备
任意 Ai 终端，毕竟 chrome 官方出品，主流基本都支持，具体如下图：
安装 chrome-devtools-mcp，查看仓库 READEME.md 内找到对应自己在用的Ai终端按说明操作
以 cursor 为例，只用点击给出的安装按钮即可，然后打开cursor检查安装是否成功，操作路径如下：
正文
前端日常开发主要涉及几方面：
- 开发 & 自测 & debug - 视觉验证UI是否满足需求；检查UI交互是否正常；检查控制台是否有逻辑执行报错、警告等
- 联调 - 检查网络面板判断请求状态、传参、响应数据是否合规等
- 性能优化 - 检查性能面板分析站点当前加载性能、js任务执行性能、内存变化等
基于上述三点来分别进行测试，测试的工程为，自己的主页工程
测试站点：https://home.shuaxinjs.cn/
仓库：https://github.com/SHUAXINDIARY/index-page
Ps.启动mcp分析当前站点的页面情况，cursor内安装对应mcp后，会自行判断是否调用对应mcp服务 （该mcp在提示词出出现 打开xx页，等明显是对浏览器操作的提示词信息后，会自动吊起）；且最好关闭cursor本身内置的浏览器
分析页面现状
先吊起浏览器分析当前站点首页UI现状，提示词：【打开 http://localhost:3000/ 输出当前首页所有卡片的位置】
观察上图ai输出过程，会看到直接跑chrome运行站点，然后抓取真实dom开始进行计算分析，并阶段性截图输出，以供参考；下图为ai吊起的chrome
然后进行交互测试，世界地图卡片组件有个放大按钮 (见下图箭头所指)，让其测试点击后，地图全屏展开和关闭是否正常
下图为测试交互过程，提示词：【测试世界地图全屏按钮点击交互，是否能完整全屏展示该地图】
新功能开发 + 自行验证结果
提示词：【@src/App.tsx:1-74 调整卡片出现位置，每次加载页面后，随机分布卡片位置，但是所有卡片组成的整体均要位于可视窗口的垂直水平居中位置，实现后在页面测试效果】
过程中，观察吊起的chrome会根据对话窗内输出的行为指令，自动刷新和变更
debug测试
测试白屏报错，排查
性能分析
分析站点的加载情况
上述过程中的一些分析信息片段：
手动在跑一次性能面板观察
因为有网络波动等原因，但大差不差，基本是有参考价值的
网络请求
过滤请求，提示词：【检索当前站点首页全部的图片请求有多少个】
判断获取指定请求响应，提示词：【获取请求https://tiles.openfreemap.org/planet 请求的响应数据的结构，只要一级即可】
实际应用
获取目标页内容
经典爬虫，不展开了
提取目标页UI风格
另一篇分享
TS类型生成
存量项目没有完整类型定义的，可以直接让获取目标接口，然后抓取出参生成类型
在完整一点，可以封装skills，后续增量接口可以直接喂增量接口path，然后让ai在指定页接入，然后自己跑一遍，在生成对应的出入参，然后生成类型定义
结论
经过上述前端日常开发过程中的常见场景，基本时可以重度投入使用的，效果确实不错，关于token消耗情况如下
除此之外，其实结合一些其他工作流做一些封装脚本可以完全做一套GUI自动化测试流程来提效；除过这个之外，最近看到vercel也搞了一套类似的，基于 playwright 封装的操作浏览器的cli - agent-browser，号称能压缩 token 90%，因为是终端CLI，感觉有不少潜力，有待尝试
PS.最新看到 cloudflare 基于AI做了一套类似 Next.JS 的框架 - vinext，其中用到了该库做UI渲染测试，对应出处 blog