掌握 Cursor 工具：程序员的高效利器揭秘

最近听说cursor是个编程神器，

想知道程序员们到底是怎么高效利用这个工具的？

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

这个新版本带来了两个非常重要的更新：

1. 新增了调试模式，让大家在Ask、Agent和Plan模式后，调试bug更加方便。
2. 之前的内置浏览器升级成了可视化编辑器，支持布局和样式的直接调整。

今天，我就想和大家聊聊这个浏览器的升级体验。

升级内容

我试用后发现，主要提升集中在这两个方面：

• 精准定位
• 可视化

精准定位

在使用AI开发前端时，你可能遇到过这样的情况：“请为导航栏的第二行第三个菜单样式加个热点图标，因为这是我们目前的主推活动。”

其实，这种简单的高亮效果往往需要不少额外的说明来确保我们能准确找到目标元素。

现在有了可视化浏览器，你可以直接点击目标，然后直接在对话框中进行修改，省时省力。

不过，这个功能其实在之前的内测浏览器中就已经体验过了，所以并不算特别惊艳。

可视化

另一个值得一提的升级就是可视化的增强。

首先，新增了 Design 和 CSS 面板，让你可以不需要进入代码就能调整页面效果，比如文字内容和颜色样式等。

尤其是 Design 面板，明显是针对 Figma 等原型工具的。现在AI在原型制作方面已经表现得相当不错，再加上可视化编辑，效率肯定会更高。

如果你修改了内容，别忘了点击“应用”，如果操作错了，也可以选择“撤销”或者直接“取消”。

其次，在浏览器中，你可以直接拖动元素的位置和调整大小。

这样你再也不用担心调整过头、反复优化的问题了，真的是所见即所得，一步到位。

不过，调整大小时要稍微注意，得把鼠标移动到 Layout – Dimensions 下的 W 上，等鼠标变成双向箭头时才能拖动调整。

改进的地方

虽然升级的体验还不错，但仍有几个方面需要进一步完善。

首先，官方提到的直接修改 props 目前似乎仅支持React工程，而Vue工程就不行，直接缺失了 Properties 部分。

其次，页面元素可以直接拖动，但拖动后导致的 DOM 结构变化，会影响原有的样式。应该让原有样式在拖动时同步移动并保持效果，这样才更有价值。

最后，Cursor Browser 开放了开发者工具，还包含大家常用的 Console 选项卡。

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

结语

在我的使用过程中，内置浏览器及相关特性最早是由 TRAE 提出的，但现在 Cursor 显然做得更深入了。

我其实希望它们能相互“借鉴”，毕竟，那些反响好的特性值得借鉴，更多优秀的升级一定会带来AI开发的新体验。

期待后续各家的更新~