预览 ​

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

功能特性 ​

  • 即时渲染：代码修改后自动渲染运行效果，无需手动刷新
  • 零配置：无需手动启动服务或切换工具
  • 视觉优化：支持选择组件通过自然语言进行 UI 优化

实时预览 ​

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

方式一：自动调用 ​

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

方式二：手动触发 ​

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

自动预览

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

示例 Prompt：

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

预览效果 ​

预览效果如下图所示：

AI 视觉优化 ​

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

方式一：自然语言优化 ​

  1. 单击 AI 视觉优化 按钮

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

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

    AI 视觉优化输入

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

    优化效果

方式二：DOM 编辑器 ​

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

DOM 编辑器

修复错误 ​

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

常见问题 ​

预览页面空白怎么办？ ​

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

  • 代码存在语法错误：检查控制台是否有报错信息
  • 依赖未正确安装：确认 node_modules 已安装，尝试重新执行 npm install
  • 端口被占用或服务未启动：检查开发服务器是否正常运行

解决方法：

  1. 在对话中描述问题现象，例如输入"预览页面空白，请帮我排查问题"
  2. 如果预览窗口显示错误信息，点击 Send Errors 将错误发送给 AI 进行分析
  3. 尝试手动重新触发预览：点击 Chat 面板右上角的 Preview 按钮，或输入"请重新打开预览"