功能详解

Cursor Browser 功能详解
让 AI 成为你的“鼠标”和“眼睛”

Cursor Browser 并不是一个用来上网的普通浏览器,而是一个让 AI 能够“看见”并直接操作网页的强大工具。从自动化测试到可视化编辑,它正在重新定义前端开发流。

Cursor-VIP Team

Cursor Browser 是什么?
简单来说,它是 Cursor 内置的一个“无头浏览器”控制中心。它允许 AI Agent 像真人一样打开网页、点击按钮、填写表单,甚至实时读取控制台日志。这意味着,你可以让 AI 帮你完成繁琐的测试和调试工作,而不仅仅是写代码。

一、核心功能:让 AI 接管繁琐操作

1

自动化测试与调试

你只需输入自然语言指令,例如“验证登录页面的错误提示是否正常”。AI 会自动打开网页,输入错误的用户名密码,观察页面反应,截图并生成测试报告。这相当于拥有了一个随叫随到的 QA 工程师。

2

实时监控与日志分析

AI 可以实时读取浏览器的控制台 (Console) 日志和网络请求 (Network)。当你遇到报错时,AI 能直接分析错误堆栈,快速定位问题根源,甚至直接给出修复代码。

3

智能截图与对比

AI 可以随时为当前页面或特定区域截图。这在 UI 走查时非常有用,你可以让 AI 自动截取不同分辨率下的页面效果,方便比对和存档。

二、可视化编辑:像用 Figma 一样写代码

Cursor Browser 最惊艳的功能莫过于可视化编辑器 (Visual Editor)。它打破了代码与界面的隔阂,实现了真正的“所见即所得”。

拖拽调整布局

你可以直接在预览窗口中拖动元素来调整位置和顺序。视觉上满意后,AI 会自动帮你更新底层的 HTML/CSS 代码,保持代码整洁。

自然语言修图

点击页面上的任何元素,直接告诉 AI “把这个按钮变大一点”或者“换个更醒目的背景色”,代码瞬间自动修改完成。

三、如何开启 Cursor Browser?

目前该功能处于 Beta 阶段,可能需要手动开启。

  1. 打开 Cursor,点击右上角的齿轮图标进入 Settings
  2. 在左侧菜单中找到 Beta 选项卡。
  3. 找到 "Cursor Browser""Agent Window" 开关,确保它们都处于开启状态。
  4. 重启 Cursor,你会在侧边栏或命令面板中看到新的浏览器入口。

四、与 Figma 的区别

很多人会问:有了这个,还需要 Figma 吗?

  • Figma: 适合从 0 到 1 的创意设计和原型探索。它是设计师的画布,不需要考虑代码实现。
  • Cursor Browser: 适合从 1 到 100 的开发落地和精修。它修改的是真实的源码,保证了设计与代码的一致性。

最佳实践是:在 Figma 定好整体风格,在 Cursor Browser 中进行细节调整和最终实现。两者结合,构成高效的前端开发闭环。

总结:Cursor Browser 是 AI 赋能前端开发的又一利器。它让开发者从繁琐的 CSS 调试和重复测试中解放出来,专注于创造更好的用户体验。