執行 · 預覽 · 設計
這些功能讓你把做好的程式跑跑看(執行)、看看內部(除錯)、看網頁畫面(網頁預覽)、檢查設計(設計工作台)。修改 → 執行 → 確認,全都在 Blyck 裡完成。
| 功能 | 免費 / Pro |
|---|---|
| ▶ 執行、輸出視窗、錯誤位置標示 | 免費 |
查看除錯視窗(Ctrl+Shift+D) | 免費 |
| 網頁預覽、書籤 | 免費 |
| 把擷取·錄製傳給 AI 聊天 | Pro |
| AI 執行·觀察(Run & Observe)、AI 除錯工具·自動調查、AI 操作預覽、視覺回歸、設計工作台 | Pro |
執行程式碼(▶ 執行)
Section titled “執行程式碼(▶ 執行)”
- ▶ 執行 — 一個按鈕就能執行本機已儲存的檔案(執行中會變成 ■ 停止) · 旁邊的 ▾ 也可以選「偵錯」(F5)(Python · JavaScript)
- 狀態文字 — 結束後顯示 "結束代碼 0" · [■ 停止] [清除] [✕]
- 輸出面板 — 最上方是 $ 指令(琥珀色),接著是程式輸出,最後是 [結束代碼 0](綠色)
在編輯器中按一個按鈕就執行目前的檔案(或它所屬的專案),並在編輯器下方的輸出視窗即時查看結果。
- 先儲存檔案(
Ctrl+S)。▶ 執行會執行儲存在磁碟上的內容。 - 按編輯器標題列的 [▶ 執行](
Ctrl+F5)。輸出視窗會打開。 - 執行中按鈕會變成紅色的 [■ 停止]。
- 結束後會顯示 結束代碼 {n},有找到錯誤的話還會顯示 {n} 個問題。
▶ 執行只會在儲存在本機的檔案上顯示(遠端檔案·未命名檔案沒有)。
用什麼指令執行
Section titled “用什麼指令執行”Blyck 會看檔案和專案自動決定指令。
| 對象 | 執行指令 |
|---|---|
.py · .rb · .php · .lua · .sh 檔案 | 直接執行該檔案(python 檔案 等)— 優先於專案 |
go.mod | go run . |
Cargo.toml | cargo run |
*.sln · *.csproj | dotnet run |
pubspec.yaml | flutter run |
pom.xml / build.gradle | mvn exec:java / gradle run |
package.json | npm start |
沒有標示檔案的 .js / .go | node 檔案 / go run 檔案 |
輸出視窗與錯誤位置
Section titled “輸出視窗與錯誤位置”- 最上方是
$ 指令,接著是一般輸出、錯誤輸出(紅色),最後是結束代碼。最多保留最近 5,000 行。 - [清除] 是清除輸出,[✕] 是隱藏視窗(程式不會停止)。
- 會辨識輸出中的錯誤格式(Python、Go、Rust、gcc/clang、C#、TypeScript 等),在開著的檔案上加上紅色(錯誤)·黃色(警告)底線。點錯誤那一行,就會跳到該檔案的那一行。
偵錯執行 — 在紅點處暫停並查看值
Section titled “偵錯執行 — 在紅點處暫停並查看值”讓本機儲存的 Python · JavaScript 檔案停在想要的行,查看當時的變數值,一行一行往下走。不用加 print。
- 按要暫停的行的行號左側,或按
F9— 出現 紅點(中斷點)。 - 標題列 ▶ 執行 ▾ → 偵錯(或
F5)。Python 第一次會下載偵錯工具(debugpy,約 33MB)。JavaScript 使用 Node.js 內建的偵錯工具。 - 暫停後該行變黃,行尾淡淡顯示目前的值,下方開啟 變數 · 呼叫堆疊 面板。滑鼠移到變數上可以看到值。
- 繼續(
F5) · 下一行(F10) · 進入函式(F11) · 跳出函式(Shift+F11) · 停止偵錯(Shift+F5)。
- 在暫停處按 問 AI,會一併傳送暫停的行 · 錯誤 · 目前的值 · 呼叫堆疊 · 輸出 (Pro)。
- AI 聊天直接偵錯 (Pro):說「幫我找原因」,AI 會設定紅點、偵錯執行並讀取值(
dbg_breakpoint·dbg_start·dbg_step·dbg_inspect)。你的編輯器畫面會跟著一起動,狀態列顯示 AI 聊天正在偵錯。在 ⚡ 執行 · 🚀 自動模式下可用。 - 遠端(SFTP)檔案和其他語言暫不支援。
讓 AI 執行並修正 — Run & Observe(Pro)
Section titled “讓 AI 執行並修正 — Run & Observe(Pro)”在 AI 聊天中說「跑一下測試,失敗的話幫我修」,AI 就會反覆自己執行 → 確認輸出·錯誤 → 修改程式碼 → 再執行。不需要複製貼上輸出。
- 把 AI 聊天模式設為 ⚡ 執行 或 🚀 自動(💬 聊天·📋 計畫模式下無法執行)。
- 像「跑 pytest 並修正失敗」這樣交代。
- 會搬移或覆寫檔案的指令會跳出核准卡片。非常危險的指令,即使在 🚀 自動模式下也會詢問。
- 預設等待時間是 30 秒。像伺服器這種持續運作的程式,會回傳到那時為止的輸出。
- AI 聊天的專案資料夾是遠端(SSH)的話,會在伺服器上執行。
除錯視窗與 AI Debug Bridge
Section titled “除錯視窗與 AI Debug Bridge”
- 篩選 — label · loc 欄位,選擇 level · source / 🔕 AI 自動調查 · ⏸ 暫停 · 🗑 清除 · ✕ 關閉
- 一行紀錄 — [等級] 名稱 值 · 來源(terminal / preview)
這是讓 AI 直接讀取程式執行中的內部值(變數值等)的機制。在程式碼中放一行 @BLYCK@ … 格式的紀錄,當那一行印在 Blyck 終端機或網頁預覽中時,Blyck 會收集起來,讓 AI 讀取並找出原因。通常是AI 自己放進去,用完再自己刪掉。
- 用
Ctrl+Shift+D打開即時查看收集到的紀錄的 🐞 Debug Bridge 視窗(免費)。可以依名稱·位置·階段篩選。 - 開啟 🔔 AI 自動調查(Pro,預設關閉)後,出現
error·assert紀錄時 AI 會自動開始調查。因為會用到 AI,會產生費用。 - 印在 ▶ 執行輸出視窗或 Blyck 外部的紀錄不會被收集。
詳細用法請看 AI 除錯橋接。
網頁預覽(Live Preview)
Section titled “網頁預覽(Live Preview)”
- 編輯器 — 產生畫面的程式碼(app.py)
- 網頁預覽列 — ← → ↻ ☆ · 網址欄 · − 100% + · 📷 擷取 · 錄製
- 在 Blyck 內的小瀏覽器中顯示開發中的畫面
這是在 Blyck 面板中顯示正在製作的網站的小型瀏覽器。可以自己點點看,AI 也能看著畫面操作。預覽本身是免費的。
- 先啟動開發伺服器(例如在終端機執行
npm run dev)。 - 按
Ctrl+Alt+B(或新分頁選單 → 網頁預覽圖示格)。 - 輸入網址(預設
http://localhost:3000)。[開啟]。
- 沒寫
http://的話會自動加上。自己電腦上的 HTML 檔案請用file:///C:/…/index.html這種方式打開。
| 按鈕 | 功能 |
|---|---|
| ← / → / ↻ | 上一頁 / 下一頁 / 重新整理 |
| ☆ | 書籤(從瀏覽器匯入) |
| 網址欄 | 輸入網址後按 Enter |
| − / 100% / + | 縮小 / 縮放比例(點一下回到 100%)/ 放大。25%~500% |
| 📷 擷取 | 擷取畫面並打開擷取編輯器,再附加到 AI 聊天 |
| 紅點 錄製 | 每 0.5 秒擷取一次畫面(最多 60 張,約 30 秒)→ 選出要送的畫面附加到 AI 聊天 |
- 把擷取·錄製傳給 AI 是 Pro。傳送前請先打開 AI 聊天面板(沒有的話畫好的標註會消失)。
- ☆ 書籤:第一次按會出現 [從 {瀏覽器} 匯入] 按鈕。會匯入 Chrome·Edge·Brave·Vivaldi(Mac 也包含 Safari)預設設定檔的書籤。Firefox 不行。
- Google·GitHub 這類以新視窗登入的頁面,會以真正的視窗打開,所以可以登入。
- 主控台紀錄和網路紀錄各收集最近 200 筆(供 AI 讀取)。
- 重新開啟應用程式時,只會恢復網址。
讓 AI 查看並操作預覽(Pro)
Section titled “讓 AI 查看並操作預覽(Pro)”AI 聊天會直接查看網頁預覽,點選、輸入、讀取主控台錯誤並修正。
在登入表單輸入測試帳號並送出看看。如果有主控台錯誤,幫我找出原因並修正。AI 會依照 輸入 → 等待 → 擷取畫面 → 讀取主控台 的順序進行。
| 能做的事 | 核准 |
|---|---|
| 擷取畫面、讀取主控台·網路紀錄、切換網址、等待 | 不需要 |
| 點選元素、輸入文字、在頁面中執行 JS | ⚡ 執行模式下需要 |
- 點選·輸入·執行 JS 在 💬 聊天·📋 計畫模式下會被擋下。
- AI 要擷取畫面時,預覽面板必須顯示在畫面上。
視覺回歸 — 比較修改前後的畫面(Pro)
Section titled “視覺回歸 — 比較修改前後的畫面(Pro)”把修改程式碼之前的畫面存成基準,再與修改之後的畫面比較,找出「畫面是否意外跑版」。網頁預覽、桌面鏡像、設計工作台都可以使用。
**這個功能是用說的交代 AI。**沒有給使用者按的按鈕。
- 交代「用現在的畫面當基準,改完按鈕顏色後幫我比較」。
- AI 會儲存基準畫面,修改程式碼,然後進行比較。
| 判定 | 意思 |
|---|---|
| 通過 | 變化在 2% 以下 |
| 需要確認 | 超過 2% |
| 回歸 | 畫面大小本身改變了(疑似版面跑掉) |
比較圖左邊是 BEFORE,右邊是 AFTER,有變化的地方以紅框標示。基準畫面只存在記憶體中,關閉面板或重新開啟應用程式就會消失。
設計工作台(Pro)
Section titled “設計工作台(Pro)”這是把 AI 做出的設計元件(顏色·間距等 token、按鈕等元件、畫面、畫面流程)集中成卡片清單查看,並以網頁·平板·手機尺寸預覽檢查的面板(名牌 設計,🎨)。
- 在專案資料夾的
design-system資料夾中放入設計清單檔_ds_manifest.json。通常由 AI(Claude·Codex)幫你建立。 - 在 AI 聊天(⚡ 執行 或 🚀 自動模式)中說「打開設計面板」。無法用新分頁選單或快速鍵打開。
- 點卡片可以放大查看(網頁的話會分成行動裝置·平板·桌面三格)。用 ← 清單 返回。
| 按鈕 | 功能 |
|---|---|
| [匯出 tokens ↓] | 把設計 token 匯出成 Flutter(app_tokens.dart)·CSS(tokens.css)檔案 |
| [Golden harness ↓] | 建立 iOS·Android 畫面比較測試檔(.dart) |
| 選擇平台 | 全部 / web / desktop / iOS / Android |
- 設計面板開著時,AI 會同時收到要重複使用清單中 token·元件的提示。
- 視覺比較發現問題時,回答下方會加上 [重新產生設計] / [忽略] 按鈕。
- 不會讀取遠端(SFTP)專案資料夾中的
design-system。
Q. 看不到 ▶ 執行按鈕。 這是遠端檔案,或是從未儲存過的未命名檔案。只有儲存在本機的檔案才會顯示。
Q. 出現「未找到執行命令」。 這是不支援的種類,或是 CMake·Make 專案。請直接在終端機執行。
Q. 修改的內容沒有反映到執行結果。
沒有儲存。請按 Ctrl+S 後再執行。
Q. 網頁預覽一片白,或出現「頁面載入失敗」。 請確認開發伺服器有沒有啟動、網址·連接埠是否正確,再按 ↻。如果是遠端專案,伺服器是在遠端執行,請用伺服器的位址打開。
Q. AI 無法擷取畫面。 預覽面板被遮住了。請把那個分頁切到前面,讓它顯示出來。
Q. 除錯視窗什麼都沒有。 你是在 ▶ 執行輸出視窗或 Blyck 外部執行的。請在 Blyck 終端機或網頁預覽中執行。
Q. 視覺比較說「沒有基線」。 因為重新開啟應用程式或關閉面板,基準已經消失。請讓 AI 從建立基準開始重來。
Q. 設計面板打不開。 目前是 💬 聊天·📋 計畫模式。請切換到 ⚡ 執行模式後再交代一次。
Q.(Mac)書籤中沒有 Safari。 請到系統設定 → 隱私權與安全性 → 完整磁碟取用權限,允許 Blyck。