CodeFlicker 预览功能

预览（Preview）功能可以通过 Agent 识别 Web 项目的"启动脚本"并运行相应的本地服务。您可以选择在 IDE 内查看页面或在浏览器中查看。

自动识别启动脚本

• npm run dev
• yarn dev
• pnpm dev
• 其他自定义启动命令

预览模式选择

• IDE 内嵌预览
• 独立浏览器预览
• 自动解析服务地址
• 实时热更新

交互式调试工具栏

通过预览打开的页面在右下角有调试工具栏，支持元素选择和发送控制台错误。

浏览器模式

IDE 模式

预览项目

单击“预览”按钮后，CodeFlicker 将完成：

• 识别启动脚本（通常如 npm run dev、yarn dev、pnpm dev）;
• 启动本地服务，从输出中解析服务地址（如localhost：3000）
• 如果是前端项目，它将显示下面的卡片以提供预览

预览完成加载后：

• 如果选择 IDE 预览：编辑器中将出现一个嵌入页面;
• 如果您选择独立浏览器预览：它会自动启动一个独立的浏览器窗口。

与公共主页互动

通过预览打开的页面在右下角有一个调试工具栏。

• 在浏览器中，工具栏目前支持“元素选择”和“发送控制台错误”。
• 在 IDE 中，“控制台错误”显示在 IDE 底部的单独区域中。

元素选择功能

点击页面上的目标元素可将相应的 DOM 元素信息发送到 IDE。您可以直接基于当前选中元素的上下文与 Agent 对话，无需用文字描述 UI 相关的变化。

在页面内可以使用快捷键 (cmd+i) 调用此功能。

支持的前端框架版本

“发送控制台错误”功能

• 当页面运行时发生异常时，工具栏将显示捕获的错误数。
• 将鼠标悬停在工具栏按钮上可查看捕获的异常信息。
• 选择您要发送的异常，然后单击“发送”将其发送到 CodeFlick 的对话。已发送的异常将被清除

笔记

• 当发生热更新时，两种模式下的页面都会刷新。
• 如果使用的是 IDE 模式，则不建议在嵌入页面中调试与全屏浏览器相关的功能（例如下载功能、页面导航）。您可以切换到独立浏览器模式。
• 关闭预览不会影响项目的本地运行状态（是否继续运行由您的项目决定）。