在聊天視窗內預覽您的 BRICKS 應用程式。預覽面板以內嵌網頁檢視的方式執行已編譯的專案,自動偵測檔案變更,並為 BRICKS CLI 提供 Chrome DevTools Protocol (CDP) 端點。Documentation Index
Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
Use this file to discover all available pages before exploring further.
開啟預覽
點擊輸入列中的預覽按鈕。面板掛載於聊天面板右側,並在背景開始編譯您的專案。 面板開啟後,CTOR 會執行bun typecheck,接著執行 bun compile.ts,然後使用 application.json 中的 stage(production、beta 或 development)將應用程式載入內嵌網頁檢視。
預覽需要安裝
bun 並在您的 PATH 中可用。面板控制
面板標頭有三個按鈕:| 按鈕 | 動作 |
|---|---|
| 重新整理 | 重新載入網頁檢視 |
| 彈出 | 在新的應用程式內視窗中開啟預覽 |
關閉(×) | 關閉面板並停止後端 |
與差異檢視的版面配置
當差異檢視和預覽面板同時開啟時,它們會在單一右側欄中垂直堆疊。拖曳兩者之間的控制桿可調整分割比例。拖曳欄左緣的控制桿可調整欄與聊天區域的比例。即時重新編譯
面板監視您的專案變更:- 儲存
subspaces/下的任何檔案會觸發透過bun compile.ts的防抖動重新建置。 .bricks/build/application-config.json的變更會直接推送至執行中的網頁檢視,無需完整重新載入。
彈出視窗
點擊彈出可將預覽分離至獨立的無邊框應用程式內視窗。新視窗保持後端工作階段持續執行——關閉聊天側面板、切換工作階段或切換專案不會停止已彈出的預覽。關閉彈出視窗本身才會釋放工作階段。繪圖模式
點選面板標頭的 Draw 可在執行中的預覽上方疊加一層筆刷畫布。直接在預覽內容上塗鴉——圈出對位錯誤的元素、標記目標區域,或快速註記想法——接著點選 Save 將標註後的螢幕擷圖(預覽內容與筆跡合成的單一影像)附加至聊天輸入框。 繪圖模式在內嵌面板與彈出預覽視窗中皆可使用。在彈出視窗中儲存的影像會自動轉送到主視窗的聊天輸入框。CDP 與 bricks devtools
預覽執行時,CTOR 會啟動 CDP 伺服器,並將探索資訊寫入專案目錄中的 .bricks/devtools.json。BRICKS CLI 讀取此檔案以從終端機檢查執行中的預覽。
在專案目錄內執行:
bricks devtools --help 以檢視完整的子指令清單(brick、input、network、runtime、screenshot、storage)。
關閉面板時,探索檔案會被移除。