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