Firebase Studio 提供多種方式,讓您在開發期間預覽及測試應用程式。包括使用 App Prototyping agent、善用內建的網頁預覽工具,以及 Firebase Studio 工作區提供的網頁和 Android 預覽工具。
啟用及設定預覽環境
如果您使用範本或使用 App Prototyping agent 生成應用程式,系統通常會為您設定預覽畫面。如果範本中尚未設定預覽畫面,您可以在專案的 Nix 設定檔中設定。
在工作區中開啟
.idx/dev.nix
。建立新工作區時,Firebase Studio 會自動產生這個檔案,並根據您選取的範本,納入所有適用的預覽環境。如果檔案不在 Firebase Studio 程式碼存放區中,請建立檔案,然後將
idx.previews
屬性設為true
。然後新增設定屬性,如下列範例所示:{ pkgs, ... }: { # NOTE: This is an excerpt of a complete Nix configuration example. # For more information about the dev.nix file in Firebase Studio, see # https://firebase.google.com/docs/studio/customize-workspace # Enable previews and customize configuration idx.previews = { enable = true; previews = { # The following object sets web previews web = { command = [ "npm" "run" "start" "--" "--port" "$PORT" "--host" "0.0.0.0" "--disable-host-check" ]; manager = "web"; # Optionally, specify a directory that contains your web app # cwd = "app/client"; }; # The following object sets Android previews # Note that this is supported only on Flutter workspaces android = { manager = "flutter"; }; }; }; }
如需 Firebase Studio 中的完整 Nix 屬性清單,請參閱 Nix + Firebase Studio。
重建環境:
- 從指令面板 (
Cmd+Shift+P
/Ctrl+Shift+P
) 執行「Firebase Studio: Hard restart」指令。 - 在「環境設定已更新」通知中,按一下「重建環境」。
修改
dev.nix
檔案後重建環境時,工作區會顯示預覽面板,並視您啟用的項目顯示「Android」和/或「網頁」分頁。- 從指令面板 (
使用應用程式預覽
Firebase Studio 會在 Chrome 和 Android 模擬器上提供網頁預覽畫面,並在預覽環境中安裝應用程式。這樣一來,您就能直接在工作區中,從頭到尾完整測試應用程式。
重新整理網頁和 Android 預覽畫面
Firebase Studio 會掛鉤至基礎架構 (例如 npm run start
和 flutter hot-reload
) 的熱重載功能,簡化內部開發迴圈。Firebase Studio 提供下列重新載入類型:
自動熱重載:儲存檔案時,系統會自動執行熱重載。熱重載有時也稱為熱模組更換 (或 HMR),可更新應用程式,不必重新載入網頁 (適用於網頁應用程式),也不必重新啟動或重新安裝應用程式 (適用於模擬器)。這種做法有助於保留應用程式的即時狀態,但可能無法一律如預期運作。
手動完整重新載入:這個選項等同於網頁重新整理 (適用於網頁應用程式) 或重新啟動應用程式 (適用於模擬器)。建議使用完整重新載入功能,擷取原始碼的重大變更,例如重構大量程式碼時。
手動強制重新啟動:這個選項會完整重新啟動 Firebase Studio 的預覽系統,包括停止及重新啟動應用程式的網路伺服器。
您可以使用預覽工具列或指令區塊面板 (在 Mac 上按 Cmd+Shift+P
,在 ChromeOS、Windows 或 Linux 上按 Ctrl+Shift+P
),在「Firebase Studio」類別下方找到所有重新載入選項。
如要使用預覽工具列,請按照下列步驟操作:
按一下「重新載入」圖示即可重新整理頁面。這會強制完整重新載入。 如要使用其他重新整理方式,請點選重新載入圖示旁的箭頭,展開選單。
從選單中選取所需的重新整理選項:「熱重載」、「完整重新載入」或「硬性重新啟動」。
與他人分享網頁預覽畫面
您可以啟用存取權,然後分享預覽畫面的直接連結,讓其他人提供意見:
在網頁預覽工具列中,按一下網址列右側的「分享預覽連結」
圖示,開啟分享選單。
您可以透過下列任一方式,允許其他人存取工作區:
公開預覽:公開工作區預覽畫面,這樣一來,只要工作區處於啟用狀態,網路上任何人都能存取工作區執行的預覽伺服器,直到您關閉公開存取權為止。
管理工作區存取權。只與要授予存取權的使用者共用工作區。
選取「複製工作區預覽網址」,即可複製工作區預覽的直接連結,然後傳送給想徵詢意見回饋的對象。你也可以使用顯示的 QR code,在行動裝置上開啟預覽畫面。
設定自動儲存和熱重載
根據預設,Firebase Studio 會在您停止輸入內容一秒後自動儲存工作,並觸發自動熱重載。如要以其他間隔儲存工作,請變更自動儲存設定。Firebase Studio你也可以關閉自動儲存功能。
設定自動儲存
- 開啟 Firebase Studio。
- 按一下「設定」圖示。
- 搜尋「Files: Auto Save」,並確認該欄位已設為 `afterDelay`。
- 搜尋「檔案:自動儲存延遲」。
- 輸入新的自動儲存延遲間隔 (以毫秒為單位)。現在系統會根據新的自動儲存延遲設定,自動儲存您對工作所做的變更。
停用自動儲存功能
- 開啟 Firebase Studio。
- 按一下「設定」圖示。
- 搜尋「檔案:自動儲存」。
- 點選下拉式選單,然後選取「關閉」。
預覽後端已中斷連線
您可以放心忽略「預覽後端已中斷連線」訊息。