Preview
The Preview feature can identify the "startup script" of web projects through Agent and run the corresponding local service. You can choose to view the page within the IDE or in a browser. 
Preview Project
After clicking the Preview button, CodeFlicker will complete:
- Identify startup scripts (commonly like npm run dev, yarn dev, pnpm dev);
- Start local service and parse the service address from the output (such as localhost:3000)
- If it's a frontend project, it will display the card below to provide preview
When the Preview finishes Loading:
- If you choose IDE preview: an embedded page will appear in the editor;
- If you choose independent browser preview: it will automatically launch an independent browser window.
Interact with Pages
Pages opened through Preview have a debug toolbar in the bottom right corner.
- In the browser, the toolbar currently supports "element selection" and "send console errors".
- In the IDE, "console errors" are displayed in a separate area at the bottom of the IDE.
"Element Selection" Feature
The "element selection" allows you to click on a target element on the page to send the corresponding DOM element information to the IDE. You can directly have conversations with the Agent based on the context of the currently selected element, without needing to describe UI-related changes in words. You can also invoke this feature within the page using the shortcut key (cmd+i).
Currently supported frontend framework versions and the detailed information available after selecting elements — no need to add any dependencies or configurations to your project:
| Framework | React 16 | React 18 | React 19 | Vue 2 | Vue 3 |
|---|---|---|---|---|---|
| tagName | ✅ | ✅ | ✅ | ✅ | ✅ |
| class | ✅ | ✅ | ✅ | ✅ | ✅ |
| attributes | ✅ | ✅ | ✅ | ✅ | ✅ |
| path | ✅ | ✅ | ❌ | ✅ | ✅ |
| Start line number | ✅ | ✅ | ❌ | ❌ | ✅ |
| End line number | ❌ | ❌. | ❌ | ❌ | ❌ |
| style | ✅ | ✅ | ✅ | ✅ | ✅ |
"Send Console Errors" Feature
- When exceptions occur during page runtime, the toolbar will display the number of captured errors.
- Hover over the toolbar button to see the captured exception information.
- Select the exception you want to send and click "Send" to send it to CodeFlick's conversation. Exceptions that have been sent will be cleared
Notes
- When hot updates occur, pages in both modes will refresh.
- If you're using IDE mode, features related to full-screen browser (such as download functionality, page navigation) are not recommended for debugging in the embedded page. You can switch to independent browser mode.
- Closing the preview will not affect the local running status of the project (whether to keep running is determined by your project).