Run & Preview

修改代码 → 执行 → 确认结果的循环,在 Blyck 内即可闭环。错误会作为编辑器标记返回,Web 画面直接内嵌到面板,AI 亲自看画面并验证。

Run & Observe —— 执行并观察

按下 ▶ 运行 按钮后,输出不会只是流过。Problem Matcher 会从实时输出中解析错误,按文件 · 行 · 严重程度结构化,并在相应位置打上编辑器标记(红色下划线)。无需用眼睛追着错误消息去找文件。

执行命令自动检测

会查看项目根的标志文件,自动建议默认执行命令。

检测文件	建议命令
package.json	npm start(也识别 build · test 脚本)
go.mod	go run .
Cargo.toml	cargo run
*.csproj / .sln	dotnet run
pyproject.toml / setup.py	pytest
Makefile	make
单个 .py / .js 文件	python <文件> / node <文件>

命令可自由修改并按项目保存。输出面板中实时流动命令($)·标准输出(白色)·标准错误(红色),最多显示 5,000 行。执行中按钮会变为 ■ 停止,点击即刻中断进程。

各语言错误解析(Problem Matcher)

语言 / 工具	解析对象
Python	回溯(File "...", line N)
Go / Rust	编译错误(filename:line:col)
C / C++(gcc · clang)	警告·错误
C#(MSBuild · dotnet)	构建错误
Node.js	堆栈跟踪
自定义	用正则直接添加 matcher

解析出的错误会在输出面板中以 文件名:行号 形式高亮显示,点击后编辑器会跳转到对应行。

与 AI 配合

AI 聊天 也使用同一路径。AI 用 run_observe 工具运行测试,并以解析出的错误位置为依据自行修改代码。在 Act(⚡ 执行+评审)· Auto(🚀 自动)模式下工作,服务器型进程会在 30 秒超时后收集结果。

仅限本地保存文件

▶ 运行按钮仅在保存于本地的文件上出现。远程(SFTP)文件或未保存的 Untitled 文件上不会显示。

---

Live Preview —— 应用内的浏览器

运行开发服务器后,将 Web 画面直接内嵌到面板。无需另开浏览器在窗口间来回切换,即可将代码 · 终端 · 画面保持在同一视野。

打开预览

1. 先在终端中运行开发服务器(npm run dev、python -m http.server 等)。
2. 新建标签页菜单(+)→ 选择 🌐 Web 预览…。
3. 在 URL 输入框中输入服务器地址(例如 http://localhost:3000)。

必须有开发服务器

在开发服务器未运行的状态下打开预览会加载失败。请务必先运行服务器再输入 URL。

头部控件

按钮	行为
刷新	重新加载当前 URL
缩放 25%~500%	调节比例。点击比例数字会立即回到 100%
URL 地址栏	直接跳转到其他路径

控制台日志与 fetch/XHR 网络响应各自最多自动收集最近 200 条。AI 诊断时会利用这些数据。

---

AI Live Preview 工具

可在 AI 聊天中直接操作预览面板。在 AI 聊天 的 Act(⚡)或 Auto(🚀)模式下,下列工具会被激活。

工具	行为
panel_screenshot	捕获当前画面 → AI 以图片确认(任何面板均自动识别种类)
preview_navigate	跳转到指定 URL
preview_click	点击坐标或选择器
preview_type	输入文本
preview_eval	在页面内执行 JavaScript 并返回结果
preview_wait	等待选择器或 N 秒(用于等待页面加载完成)
preview_console_logs	查询控制台错误·警告
preview_network	查询网络请求列表

省略 paneId 时,会应用于当前活动预览面板。

示例提示:

在登录表单里填入测试账号(test@example.com / 1234)并提交。
如果有控制台错误,找出原因并修复。

AI 会按 preview_type → preview_click → preview_wait → panel_screenshot → preview_console_logs 顺序自动执行。

页面加载时机

若 preview_eval 立即失败,说明页面尚在加载中。请先执行 preview_wait 等待加载完成后再重试。

---

AI 视觉回归验证

不靠”修好了”这句话,而是用画面来证明。对代码修改前后的画面按像素比较,自动检测非预期的视觉变化。

视觉回归流程

1. 保存 baseline —— 在修改前的目标状态下执行 preview_baseline_set
2. 修改代码 —— AI 或手动编辑
3. 比较 —— 执行 preview_baseline_diff → 返回将变化率(%)与变化区域合成为红框的图片

AI 用 vision 读取截图并交叉确认控制台日志,因此能自动抓出是否只发生了预期变更 · 别处是否被弄坏(视觉回归)。

工具	行为
preview_baseline_set	将当前画面保存为 baseline
preview_baseline_diff	当前画面与 baseline 的像素比较,返回变化率 + diff 图片

也支持桌面应用

非 Web 的桌面应用通过桌面镜像使用同样的流程。新建标签页菜单 → 🖥️ 桌面捕获… → 选择应用窗口时进行实时流传输(仅查看)。AI 用 panel_screenshot 工具捕获窗口,即使重启应用也能凭窗口标题重新找到并连接。

---

限制

• Live Preview 的自动操作(点击 · 输入)仅在内嵌的预览面板内工作。无法操作外部浏览器窗口。
• 视觉回归比较以保存 baseline 时点的窗口大小为基准。面板大小变化后请重新保存 baseline。
• ▶ 运行按钮仅在本地保存文件上显示。远程 SFTP 文件上禁用。
• run_observe 工具(AI 自主执行)仅在 ⚡ 执行+评审 · 🚀 自动模式 下工作。💬 聊天·📋 计划模式下无法使用。
• 服务器型进程(npm run dev 等)的 run_observe 超时限制为 30 秒。

---

FAQ

Q. 看不到 ▶ 运行按钮。 → 这是远程(SFTP)文件或尚未保存的文件。保存到本地后重新打开即会显示。

Q. 预览加载不出来。 → 请确认开发服务器是否正在运行。没有服务器就不工作。请先在终端中用 npm run dev 等运行服务器。详情请参阅 问题排查 页面。

Q. 想用 AI 预览工具该怎么做? → 请在 AI 聊天 中切换为 ⚡ 执行+评审(Ctrl+3) 或 🚀 自动(Ctrl+4) 模式,在预览面板已打开的状态下提出请求。

Q. preview_eval 立即失败。 → 页面尚在加载中。请用 preview_wait 等待加载完成后再重试。

Q. 错误标记没打到编辑器上。 → 请确认是否为 Problem Matcher 支持的语言。自定义错误格式可添加正则 matcher 注册。

Q. 视觉回归比较结果不对。 → 保存 baseline 之后面板大小可能已变化。请用 preview_baseline_set 重新保存 baseline 后再比较。

Q. 想让 AI 自动运行测试该怎么做? → 在 🚀 自动模式下提出”运行测试并修复错误”之类的请求,AI 会用 run_observe 自主反复执行→错误解析→代码修改循环。相关内容请参阅 AI 聊天 页面。