跳轉到主要內容

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.

在聊天視窗內預覽您的 BRICKS 應用程式。預覽面板以內嵌網頁檢視的方式執行已編譯的專案,自動偵測檔案變更,並為 BRICKS CLI 提供 Chrome DevTools Protocol (CDP) 端點。

開啟預覽

點擊輸入列中的預覽按鈕。面板掛載於聊天面板右側,並在背景開始編譯您的專案。 面板開啟後,CTOR 會執行 bun typecheck,接著執行 bun compile.ts,然後使用 application.json 中的 stage(productionbetadevelopment)將應用程式載入內嵌網頁檢視。
預覽需要安裝 bun 並在您的 PATH 中可用。

面板控制

面板標頭有三個按鈕:
按鈕動作
重新整理重新載入網頁檢視
彈出在新的應用程式內視窗中開啟預覽
關閉×關閉面板並停止後端
標題旁的小徽章顯示目前的 stage。

與差異檢視的版面配置

差異檢視和預覽面板同時開啟時,它們會在單一右側欄中垂直堆疊。拖曳兩者之間的控制桿可調整分割比例。拖曳欄左緣的控制桿可調整欄與聊天區域的比例。

即時重新編譯

面板監視您的專案變更:
  • 儲存 subspaces/ 下的任何檔案會觸發透過 bun compile.ts 的防抖動重新建置。
  • .bricks/build/application-config.json 的變更會直接推送至執行中的網頁檢視,無需完整重新載入。

彈出視窗

點擊彈出可將預覽分離至獨立的無邊框應用程式內視窗。新視窗保持後端工作階段持續執行——關閉聊天側面板、切換工作階段或切換專案不會停止已彈出的預覽。關閉彈出視窗本身才會釋放工作階段。

繪圖模式

點選面板標頭的 Draw 可在執行中的預覽上方疊加一層筆刷畫布。直接在預覽內容上塗鴉——圈出對位錯誤的元素、標記目標區域,或快速註記想法——接著點選 Save 將標註後的螢幕擷圖(預覽內容與筆跡合成的單一影像)附加至聊天輸入框。 繪圖模式在內嵌面板與彈出預覽視窗中皆可使用。在彈出視窗中儲存的影像會自動轉送到主視窗的聊天輸入框。

CDP 與 bricks devtools

預覽執行時,CTOR 會啟動 CDP 伺服器,並將探索資訊寫入專案目錄中的 .bricks/devtools.jsonBRICKS CLI 讀取此檔案以從終端機檢查執行中的預覽。 在專案目錄內執行:
bricks devtools scan        # 自動探索本機預覽
bricks devtools brick tree  # 瀏覽磚塊元件樹
執行 bricks devtools --help 以檢視完整的子指令清單(brickinputnetworkruntimescreenshotstorage)。 關閉面板時,探索檔案會被移除。

切換工作階段

切換至不同的聊天工作階段會自動關閉預覽面板並停止其後端,避免因前一個專案遺留陳舊的 CDP 伺服器。