Cursor Browser 是什么?
简单来说,它是 Cursor 内置的一个“无头浏览器”控制中心。它允许 AI Agent 像真人一样打开网页、点击按钮、填写表单,甚至实时读取控制台日志。这意味着,你可以让 AI 帮你完成繁琐的测试和调试工作,而不仅仅是写代码。
一、核心功能:让 AI 接管繁琐操作
自动化测试与调试
你只需输入自然语言指令,例如“验证登录页面的错误提示是否正常”。AI 会自动打开网页,输入错误的用户名密码,观察页面反应,截图并生成测试报告。这相当于拥有了一个随叫随到的 QA 工程师。
实时监控与日志分析
AI 可以实时读取浏览器的控制台 (Console) 日志和网络请求 (Network)。当你遇到报错时,AI 能直接分析错误堆栈,快速定位问题根源,甚至直接给出修复代码。
智能截图与对比
AI 可以随时为当前页面或特定区域截图。这在 UI 走查时非常有用,你可以让 AI 自动截取不同分辨率下的页面效果,方便比对和存档。
二、可视化编辑:像用 Figma 一样写代码
Cursor Browser 最惊艳的功能莫过于可视化编辑器 (Visual Editor)。它打破了代码与界面的隔阂,实现了真正的“所见即所得”。
拖拽调整布局
你可以直接在预览窗口中拖动元素来调整位置和顺序。视觉上满意后,AI 会自动帮你更新底层的 HTML/CSS 代码,保持代码整洁。
自然语言修图
点击页面上的任何元素,直接告诉 AI “把这个按钮变大一点”或者“换个更醒目的背景色”,代码瞬间自动修改完成。
三、如何开启 Cursor Browser?
目前该功能处于 Beta 阶段,可能需要手动开启。
- 打开 Cursor,点击右上角的齿轮图标进入 Settings。
- 在左侧菜单中找到 Beta 选项卡。
- 找到 "Cursor Browser" 和 "Agent Window" 开关,确保它们都处于开启状态。
- 重启 Cursor,你会在侧边栏或命令面板中看到新的浏览器入口。
四、与 Figma 的区别
很多人会问:有了这个,还需要 Figma 吗?
- Figma: 适合从 0 到 1 的创意设计和原型探索。它是设计师的画布,不需要考虑代码实现。
- Cursor Browser: 适合从 1 到 100 的开发落地和精修。它修改的是真实的源码,保证了设计与代码的一致性。
最佳实践是:在 Figma 定好整体风格,在 Cursor Browser 中进行细节调整和最终实现。两者结合,构成高效的前端开发闭环。
总结:Cursor Browser 是 AI 赋能前端开发的又一利器。它让开发者从繁琐的 CSS 调试和重复测试中解放出来,专注于创造更好的用户体验。