12月10日，Cursor 发布了 2.2 版本。
这个版本主要包含两个重大特性：
- 在 Ask、Agent、Plan 模式后，增加了 Debug 模式，可以更加方便大家调试 bug。
- 原来测试的内置浏览器升级为可视化编辑器了，支持布局调整和样式编辑。
今天，先和大家聊聊浏览器这块升级体验如何。
升级内容
我尝试下来，提升主要集中在以下两个方面：
- 精准定位
- 可视化
精准定位
大家在使用 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 开发的新体验。
期待后续各家的升级~