预览
最后更新时间：2026-03-02 15:47:13
CodeBuddy IDE 支持通过浏览器内核自动渲染代码修改后的运行效果，允许您在不切换工具、不手动启动服务的情况下，即时查看当前工程代码的运行效果，实现 实时调试和预览。
功能特性
即时渲染：代码修改后自动渲染运行效果，无需手动刷新
零配置：无需手动启动服务或切换工具
视觉优化：支持选择组件通过自然语言进行 UI 优化
实时预览
有以下 两种方式 可以打开本地工程预览：
方式一：自动调用
在 CraftAgent 下代码生成或修改执行完后，Agent 自动调用工具打开 Preview。
方式二：手动触发
手动单击 Chat 面板右上角 Preview 工具进行预览
或者手动输入 Prompt 来触发 Agent 打开 Preview，实时预览运行效果
示例 Prompt：
请打开预览，让我看看当前页面的效果
预览效果
预览效果如下图所示：
AI 视觉优化
在预览页面中，您可以选择部分组件，并通过 自然语言 或 DOM 编辑器 对 UI 进行优化。
方式一：自然语言优化
1. 单击 AI 视觉优化 按钮
2. 选择需要优化的组件，在下方输入框中输入修改意见
请把这个按钮改成蓝色背景
3. 查看优化效果。如果还不满意，可以继续进行样式优化
方式二：DOM 编辑器
您也可以使用 DOM 编辑器直接修改组件样式。
修复错误
单击 send errors，将错误发送到对话，由 AI 自动修复。
常见问题
预览页面空白怎么办？
预览页面显示空白或无法正常加载时，可能由以下原因导致：
代码存在语法错误：检查控制台是否有报错信息
依赖未正确安装：确认
node_modules 已安装，尝试重新执行 npm install端口被占用或服务未启动：检查开发服务器是否正常运行
解决方法：
1. 在对话中描述问题现象，例如输入"预览页面空白，请帮我排查问题"
2. 如果预览窗口显示错误信息，单击 Send Errors 将错误发送给 AI 进行分析
3. 尝试手动重新触发预览：单击 Chat 面板右上角的 Preview 按钮，或输入"请重新打开预览"
文档反馈