Run & Preview
修改程式碼 → 執行 → 確認結果的迴圈,在 Blyck 內就能完成。錯誤會以編輯器標記返回,網頁畫面直接嵌入面板,而 AI 親自看畫面並驗證。
Run & Observe — 執行並觀察
Section titled “Run & Observe — 執行並觀察”按下 ▶ 執行 按鈕後,輸出不會就這樣流過去。Problem Matcher 會從即時輸出中解析錯誤,結構化為檔案 · 行 · 嚴重度,並在相應位置打上編輯器標記(紅色底線)。無需用眼睛追著錯誤訊息找檔案。
自動偵測執行命令
Section titled “自動偵測執行命令”依專案根目錄的標記檔,自動建議預設的執行命令。
| 偵測檔 | 建議命令 |
|---|---|
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)
Section titled “各語言錯誤解析(Problem Matcher)”| 語言 / 工具 | 解析對象 |
|---|---|
| Python | 追蹤回溯(File "...", line N) |
| Go / Rust | 編譯錯誤(filename:line:col) |
| C / C++(gcc · clang) | 警告·錯誤 |
| C#(MSBuild · dotnet) | 建置錯誤 |
| Node.js | 堆疊追蹤 |
| 自訂 | 以正規表示式直接新增 matcher |
解析出的錯誤會在輸出面板以 檔名:行號 形式強調顯示,點選時編輯器會跳至該行。
Live Preview — 應用程式內的瀏覽器
Section titled “Live Preview — 應用程式內的瀏覽器”執行開發伺服器後,直接將網頁畫面嵌入面板。無需另外開啟瀏覽器在視窗間切換,即可將程式碼 · 終端機 · 畫面維持在同一視野中。
- 先在終端機執行開發伺服器(
npm run dev、python -m http.server等)。 - 新分頁選單(
+)→ 選擇 🌐 網頁預覽…。 - 在 URL 輸入框輸入伺服器位址(例:
http://localhost:3000)。
| 按鈕 | 動作 |
|---|---|
| 重新整理 | 重新載入目前 URL |
縮放 25%~500% | 調整比例。點選比例數字即立即回到 100% |
| URL 列 | 直接跳至其他路徑 |
主控台記錄與 fetch/XHR 網路回應,各自會自動收集最近 200 個。AI 診斷時會運用這些資料。
AI Live Preview 工具
Section titled “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 的順序自動執行。
AI 視覺回歸驗證
Section titled “AI 視覺回歸驗證”不用「修好了」這句話,而是用畫面證明。在程式碼修改前後以像素為單位比較畫面,自動偵測非預期的視覺變化。
視覺回歸流程
Section titled “視覺回歸流程”- 儲存 baseline — 在修改前想要的狀態執行
preview_baseline_set - 修改程式碼 — AI 或親自編輯
- 比較 — 執行
preview_baseline_diff→ 回傳將變化率(%)與變化區域以紅框合成的圖片
AI 以 vision 讀取螢幕截圖並交叉確認主控台記錄,因此能自動抓出是否只發生了預期的變更 · 其他地方是否沒有壞掉(視覺回歸)。
| 工具 | 動作 |
|---|---|
preview_baseline_set | 將目前畫面儲存為 baseline |
preview_baseline_diff | 比較目前畫面與 baseline 像素,回傳變化率 + diff 圖片 |
桌面應用程式也支援
Section titled “桌面應用程式也支援”非網頁的桌面應用程式,以桌面鏡像使用相同流程。新分頁選單 → 🖥️ 桌面擷取… → 選擇應用程式視窗時即時串流(僅供檢視)。AI 用 panel_screenshot 工具擷取視窗,即使重新啟動應用程式也會以視窗標題重新找到並連接。
- Live Preview 的自動操作(點擊 · 輸入)只在嵌入的預覽面板內運作。無法操作外部瀏覽器視窗。
- 視覺回歸比較是以儲存 baseline 時的視窗大小為基準。若面板大小改變,請重新儲存 baseline。
- ▶ 執行按鈕只在本機儲存檔案中顯示。在遠端 SFTP 檔案中停用。
run_observe工具(AI 自主執行)只在 ⚡ 執行+審查 · 🚀 自動模式中運作。在 💬 聊天·📋 計畫模式中無法使用。- 伺服器型行程(
npm run dev等)的run_observe逾時限制為 30 秒。
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 聊天 頁面。