CodeBuddy IDE 支持通过浏览器内核自动渲染代码修改后的运行效果，允许您在不切换工具、不手动启动服务的情况下，即时查看当前工程代码的运行效果，实现 实时调试和预览。

功能特性

即时渲染：代码修改后自动渲染运行效果，无需手动刷新

零配置：无需手动启动服务或切换工具

视觉优化：支持选择组件通过自然语言进行 UI 优化

实时预览

有以下 两种方式 可以打开本地工程预览：

方式一：自动调用

在 CraftAgent 下代码生成或修改执行完后，Agent 自动调用工具打开 Preview。

方式二：手动触发

手动点击 Chat 面板右上角 Preview 工具进行预览

或者手动输入 Prompt 来触发 Agent 打开 Preview，实时预览运行效果

示例 Prompt：

请打开预览，让我看看当前页面的效果

预览效果

预览效果如下图所示：

AI 视觉优化

在预览页面中，您可以选择部分组件，并通过 自然语言 或 DOM 编辑器 对 UI 进行优化。

方式一：自然语言优化

单击 AI 视觉优化 按钮

选择需要优化的组件，在下方输入框中输入修改意见

请把这个按钮改成蓝色背景

查看优化效果。如果还不满意，可以继续进行样式优化

方式二：DOM 编辑器

您也可以使用 DOM 编辑器直接修改组件样式。

修复错误

点击 send errors，将错误发送到对话，由AI自动修复。

常见问题

预览页面空白怎么办？

预览页面显示空白或无法正常加载时，可能由以下原因导致：

代码存在语法错误：检查控制台是否有报错信息

依赖未正确安装：确认 node_modules 已安装，尝试重新执行 npm install

端口被占用或服务未启动：检查开发服务器是否正常运行

解决方法：

在对话中描述问题现象，例如输入"预览页面空白，请帮我排查问题"

如果预览窗口显示错误信息，点击 Send Errors 将错误发送给 AI 进行分析

尝试手动重新触发预览：点击 Chat 面板右上角的 Preview 按钮，或输入"请重新打开预览"