给GLM装个“天眼”？这个技能让前端调试效率翻倍！
最近在折腾 AI 辅助开发的时候，发现了一个特别有意思的玩法，必须来给大家安利一波！
我们知道，很多大模型（比如 GLM）虽然在文本处理上很强，但在“看图”这块，要么是原生不支持，要么是理解能力一般。但是，前端开发又离不开对页面视觉效果的调试。每次改个样式，都要自己肉眼去比对，或者把截图扔给 Vision 模型分析，流程总显得有点割裂。
通过webapp-testing技能，GLM实现了调用浏览器进行页面截图和元素分析的能力。
今天要说的这个东西，简单来说就是给 GLM 装了一个“天眼”，实现了（伪）看图能力，极大地优化了前端调试的工作流。
它到底是个啥？
核心其实是一个叫 “webapp-testing” 的技能（Skill）。别被名字迷惑了，它不仅仅是用来测试 Web App 的，它的绝活在于能让 GLM 模型自己调用浏览器去“看”页面。
严格意义上讲，这不算 GLM 真的拥有了视觉模组，而是一种“曲线救国”的方案：它可以让模型自动在浏览器里打开指定页面，进行截图，然后读取页面上的 DOM 元素信息。
它是怎么工作的？
整个流程其实非常智能，大概分为这几步：
- 自主调用：当你向 GLM 提出关于页面样式或布局的问题时，它会判断需要“看”一眼页面，然后自动触发这个 Skill。
- 浏览器操作：Skill 会在后台控制浏览器，访问你当前的本地服务或者线上 URL。
- 智能截图：浏览器加载完毕后，它会自动截取当前页面的屏幕截图。这就相当于给模型拍了一张“照片”。
- 元素提取（重点来了！）：除了截图，最硬核的是它还能结合 Zcode 的元素能力。这意味模型不只是拿到一张死图，还能获取页面具体元素的位置、层级和代码结构。
前端调试为什么需要它？
以前我们怎么改 Bug？
- “AI，这个按钮偏左了 5px，帮我改改 CSS。”
- AI：“你把
margin-left改成 10px 试试。”（纯盲猜）
现在有了这个装备后：
- “AI，帮我看看这个登录框为什么在移动端显示不全？”
- GLM 会操控浏览器打开页面，截图一看，再结合 DOM 分析：“我看了一下截图，发现是父容器的
overflow属性设置成了 hidden，建议改成 auto 或调整宽度。”
核心优势：
- 所见即所得的分析：模型不再只是凭空想象代码运行后的样子，而是基于实际渲染结果给建议。这就解决了“代码逻辑对了，但视觉炸了”的尴尬。
- 精确定位问题：搭配 Zcode 的能力，它能把问题落实到具体的代码块上。不用自己在几百行 CSS 里大海捞针。
- 调试效率起飞：尤其是对于响应式布局的调试，不需要自己在手机和电脑间反复切换刷新，让 AI 帮你盯着屏幕看，你只需要审批它给出的代码方案就行。
总结一下
这个“webapp-testing”技能，本质上是打通了 LLM（大语言模型） 和 浏览器环境 之间的壁垒。虽然 GLM 本身还是那个只懂文本的 GLM，但这套工具链赋予了它感知图形界面的能力。
对于经常需要写 CSS、修 UI Bug 或者做自动化测试的朋友来说，这绝对是一个能立马提升幸福感的“神器”。如果你也在为前端调试头疼，不妨试试让 GLM 装上这个“天眼”！
评论已关闭