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) 调用此功能。
支持的前端框架版本
| 功能 | React 16 | React 18 | React 19 | Vue 2 | Vue 3 |
|---|---|---|---|---|---|
| tagName（标签名称） | ✅ | ✅ | ✅ | ✅ | ✅ |
| class（类） | ✅ | ✅ | ✅ | ✅ | ✅ |
| attributes（属性） | ✅ | ✅ | ✅ | ✅ | ✅ |
| path（路径） | ✅ | ✅ | ❌ | ✅ | ✅ |
| Start line number（起始行号） | ✅ | ✅ | ❌ | ❌ | ✅ |
| End line number（结束行号） | ❌ | ❌ | ❌ | ❌ | ❌ |
| style（风格） | ✅ | ✅ | ✅ | ✅ | ✅ |
“发送控制台错误”功能
- 当页面运行时发生异常时，工具栏将显示捕获的错误数。
- 将鼠标悬停在工具栏按钮上可查看捕获的异常信息。
- 选择您要发送的异常，然后单击“发送”将其发送到 CodeFlick 的对话。已发送的异常将被清除
笔记
- 当发生热更新时，两种模式下的页面都会刷新。
- 如果使用的是 IDE 模式，则不建议在嵌入页面中调试与全屏浏览器相关的功能（例如下载功能、页面导航）。您可以切换到独立浏览器模式。
- 关闭预览不会影响项目的本地运行状态（是否继续运行由您的项目决定）。