Windsurf Previews 本地网页预览与元素定位教程

本地网页都跑起来了，可跟 Cascade 说的时候只会说“这里不好看”“这个按钮有问题”？其实很多时候不是模型没理解你的意思，是缺了页面元素的具体上下文。Windsurf Previews 能把本地网页嵌到编辑器或者系统浏览器里，还会给页面加上元素和错误监听；你选中的组件会自动以 @ 提及的形式进到 Cascade 里，后续改的时候就能精准对准具体对象了。对了，现在官方文档已经用 Devin Desktop 这个名字了，旧版 Windsurf 的品牌字样可能不一样，但 Previews 的操作逻辑还是可以对照下面的界面来核对。

预览前先确认：本地页面真的能正常访问

Previews 展示的是你本地部署的结果，可不是自动给项目生成一个线上站点。操作前先确认当前工作区就是你要改的那个项目，本地开发服务已经启动，而且用普通浏览器能打开对应的页面。要是页面本身报错、端口不对或者服务根本没在监听，预览肯定只会显示空白、连接失败或者内容不全。

• 先把要预览的代码保存好，确认本地开发服务还在正常运行。
• 记好当前页面的路径和要检查的组件，别到时候只会说“这个位置”。
• 要是需要在系统浏览器里选元素，优先用 Chrome、Arc 或者 Chromium 内核的浏览器；官方说监听能力是专门针对这些浏览器优化的。
• 选页面内容之前先检查下，有没有账号、内部地址、客户数据这类不该进到提示词里的信息。

第一步：让 Cascade 打开本地网页预览

直接跟 Cascade 说要预览当前站点，再讲清楚要看哪个页面就行；也可以点工具栏上的 Web 图标，界面会自动补好进入预览的自然语言提示。一次只指定一个本地页面，这样好判断打开的是不是目标端口和路径。

在 Cascade 输入框里发预览请求，或者点 Cascade 工具栏里的 Web 图标就行。Previews 是通过工具调用启动的，不用你手动把普通网页的截图贴到对话里。

编辑器里会多出一个 Preview 标签页，页面区域和右边的 Cascade 面板能同时看到；预览开始加载本地网页，而不是跳去公开搜索结果。

要是没出现 Preview 标签，先确认你请求里明确说了“预览本地站点”，再去设置里看看 Previews 是不是被关了。要是标签打开了但页面连不上，就回终端确认下开发服务、端口和页面路径对不对，别反复让 Cascade 去操作同一个失效的地址。

第二步：确认 IDE 里的预览已经加载好目标页面

等页面完全渲染好之后，先核对下标题、主要组件和当前路由对不对，再试着做个不改动数据的普通交互，比如展开菜单或者切换展示区域啥的。别页面还白着就让 Cascade 去改样式。

Preview 会在编辑器里以新标签页的形式打开，网页视图在代码编辑区，Cascade 还是在侧边面板里。要是想要更大的查看空间，也可以把同一个本地预览放到系统浏览器里打开。

Preview 标签里能看到本地网页的真实内容，页面布局、图片和交互都和当前开发服务跑的一致；切回 Cascade 的时候预览也不会丢。

要是 IDE 里能打开，但系统浏览器的元素监听用不了，先换成 Chrome、Arc 或者 Chromium 内核的浏览器试试。要是两边显示的内容不一样，就检查下是不是打开了不同端口、不同路由，或者是旧的开发服务，刷新之前记得先保存代码。

第三步：用 Send element 精准指向页面组件

进入元素选择状态之后，把鼠标移到你要聊的那个最小组件上，等界面出现对应的高亮或者元素标签，再决定点不点击。要改按钮文字就选按钮本身；要调整整块布局再选外层区域，别把一个小问题扯到整个页面上。

点一下 Preview 右下角的 Send element，然后把鼠标移到目标元素上就行。官方演示里，鼠标指向页面对象的时候会出现蓝色的元素标签，帮你确认当前选中的是哪个组件。

光标所在的组件能被界面识别出来，标签或者高亮的范围和你准备改的对象完全对得上。画面中的 Mars 标签只覆盖对应行星，而不是整个太阳系画布。

要是鼠标移过去啥高亮都没有，先确认当前页面是通过 Previews 打开的，再看看本地页面是不是还在加载。要是高亮范围太大，就继续往更具体的子元素上移；要是始终只能选中外层容器，就把组件层级和你想要修改的范围写到后续的提示里，别让 Cascade 瞎猜。

第四步：点击目标元素，把上下文同步给 Cascade

等高亮范围对了之后点击元素，它就会进到当前 Cascade 的提示词里，然后你再补充想要的效果、不能改的内容和验收标准就行。要是一个问题涉及好几个组件，可以继续选更多元素，但每次都要先确认高亮的对象对不对，别把无关的容器也一起发过去。

保持 Send element 的状态，在预览区域点你已经核对过的组件就行。选的过程中页面会出现半透明遮罩或者目标反馈；选完之后，选中的元素会以 @ 提及的形式插到当前 Cascade 的输入框里。

Cascade 输入框里出现了对应元素的 @ 提及，你可以围绕这个组件继续补充要求。提交之后，回答应该会引用你选中的页面对象，而不是泛泛地说整个站点怎么怎么样。

要是插错了元素，就把这条提及删掉重新选，别在错误的上下文上继续加说明。要是点了之后没进到提示词里，先退出元素选择，再重新点 Send element 试试；要是在系统浏览器里还是发不了，就回 IDE 里的 Preview 重试，再检查下当前浏览器是不是在官方优化的范围内。

页面报错的时候，把元素和错误放在同一个问题里说

Previews 的监听器还能把页面错误同步给 Cascade。排查“点击组件后页面报错”这类问题的时候，先选触发问题的组件，再补充对应的错误和复现步骤，信息会比只贴一段控制台文本要全得多。要是错误里有访问令牌、接口参数或者内部路径，记得先把敏感部分删掉；元素提及只是给定位用的上下文，可不代表就能忽略数据边界。

不用 Previews 的时候记得关掉工具调用

在 Devin - Settings 里关掉 Previews 之后，Cascade 就不能再调用这个工具了。适合临时限制本地页面监听，或者团队明确不希望网页元素进到提示词里的场景。以后要恢复的话重新去设置里打开，再发起一次新的预览请求就行；已经失效的旧 Preview 标签别拿来当当前页面的证据。

本地网页预览完成检查清单

• 本地开发服务正在运行，Preview 打开的是正确的端口和页面路径。
• 编辑器里能同时看到真实的网页内容和 Cascade 面板。
• 在系统浏览器用监听功能的时候，已经优先选了 Chrome、Arc 或者 Chromium 内核的浏览器。
• 点了 Send element 之后，目标组件出现了准确的标签或者高亮范围。
• 点了元素之后，Cascade 输入框里出现了对应的 @ 提及，没混进无关的容器。
• 需要联合排错的时候，元素、复现步骤和经过清理的错误信息都指向同一个问题。
• 四张步骤图都能正常打开，分别对应预览启动、页面加载、元素悬停和元素选中这几个状态。