预览
预览功能可以通过 Agent 识别 Web 项目的"启动脚本"并运行相应的本地服务。你可以选择在 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 | ✅ | ✅ | ❌ | ✅ | ✅ |
| 起始行号 | ✅ | ✅ | ❌ | ❌ | ✅ |
| 结束行号 | ❌ | ❌. | ❌ | ❌ | ❌ |
| style | ✅ | ✅ | ✅ | ✅ | ✅ |
"发送控制台错误"功能
- 当页面运行时发生异常时,工具栏将显示捕获的错误数量。
- 将鼠标悬停在工具栏按钮上可以看到捕获的异常信息。
- 选择你想发送的异常并点击"发送",将其发送到 CodeFlicker 的对话。已发送的异常将被清除
注意事项
- 当发生热更新时,两种模式下的页面都会刷新。
- 如果你使用的是 IDE 模式,不建议在嵌入页面中调试与全屏浏览器相关的功能(例如下载功能、页面导航)。你可以切换到独立浏览器模式。
- 关闭预览不会影响项目的本地运行状态(是否保持运行由你的项目决定)。