12月10日，Cursor 发布了 2.2 版本。

这个版本主要包含两个重大特性：

1. 在 Ask、Agent、Plan 模式后，增加了 Debug 模式，可以更加方便大家调试 bug。
2. 原来测试的内置浏览器升级为可视化编辑器了，支持布局调整和样式编辑。

今天，先和大家聊聊浏览器这块升级体验如何。

升级内容

我尝试下来，提升主要集中在以下两个方面：

• 精准定位
• 可视化

精准定位

大家在使用 AI 开发前端的过程中一定遇到类似下面的情况：“请为导航栏中第二行第三个菜单样式增加热点图标，它是我们目前主推的活动。”

就是简单的一个高显效果，但是需要很多额外的文字来保证目标元素的命中。

现在有了可视化浏览器，就可以直接点选目标，然后加入对话，进而通过指令进行修改。

但这个特性在之前内测的浏览器功能中已经体验过了，并不算很出彩。

可视化

另一个升级的重点就是可视化。

第1点，增加了 Design 和 CSS 面板，不用在代码中即可完成页面效果的调整，包括文字内容、颜色样式等。

尤其是 Design 面板，明摆着冲 Figma 等原型工具去的。现阶段 AI 在原型制作阶段已经非常有效果了，如果再加上可视化编辑，必将更加高效。

如果修改内容了，记得点击“Apply”，如果操作错误，也可以“撤销”或者直接“取消”。

第2点，浏览器中的元素，可以直接拖动位置、调整大小。

再也不会出现调整过头、反复优化的问题了，所见即所得，一步到位。

调整大小的使用不是很直观，需要将鼠标放到 Layout - Dimensions 下的 W 上，当鼠标变为双向箭头时，拖动即可调整。

改进的地方

升级内容体验起来还是不错的，但还有几个地方明显需要继续改进。

一个是，官方宣称的直接修改 props 目前好像仅支持 React 工程，Vue 工程是不行的，直接没有 Properties 部分。

另一个是，页面元素支持直接拖动，但是拖动导致的 DOM 结构变化，会影响到原有的样式。应该实现原有样式同步移动并保持效果，这样的拖动才算更加有价值。

再有一个就是，Cursor Browser 开放了开发者工具，包括大家常用的 Console 选项卡。

但是，目前 Console 中出现的错误，并不能像 TRAE 一样直接点选加入对话，需要复制粘贴，不够一体化。

结语

在我的使用历程中，内置浏览器及相关特性是由 TRAE 最先提出并实现的，但目前 Cursor 明显做的更加深入了。

其实我挺希望他们可以相互“借鉴”，毕竟，值得“借鉴”的肯定是反响好的特性，越来越多好特性的升级，必然带来 AI 开发的新体验。

期待后续各家的升级~