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